Solved

Display none within a div

Posted on 2012-03-19
12
397 Views
Last Modified: 2012-03-19
Title is not as easy as the question

function showdescription(){
      var show = document.getElementById('showdescription');
      var desc = document.getElementById('description');
      if(show.checked == true){
         desc.style.display = 'block';
      }else{
         desc.style.display = 'none';
      }
    }

Open in new window


<div class="wrapper1">
   <div id="description">
   Some description
   </div>
</div>
<div class="wrapper2">
   <div id="description">
   Some description
   </div>
</div>
<input id="showdescription" type="checkbox" onchange="showdescription()" />

css

.wrapper1 #description{
  display:none
}

.wrapper2 #description{
  display:block
}

With javascript i want to toggel display to none and block only within wrapper2.

How do i go about this?
0
Comment
Question by:ScottNL1
  • 6
  • 3
  • 2
  • +1
12 Comments
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37736678
  function showdescription(){
      var show = document.getElementById('showdescription');
      var desc = document.getElementById('description');
	
	var div=document.getElementsByTagName("div");

	  for(var i=0;i<div.length;i++)
	  {
	  
	  if(div[i].className == 'wrapper2')
	  {
alert(div[i].className)
      if(show.checked == true){
         div[i].document.getElementById('description').style.display = 'block';
      }else{
         div[i].document.getElementById('description').style.display = 'none';
      }
	  }
	  }
    }

Open in new window

0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37736680
it should be onclick
<input id="showdescription" type="checkbox" onclick="showdescription()" />
0
 
LVL 20

Assisted Solution

by:chaitu chaitu
chaitu chaitu earned 150 total points
ID: 37736689
  function showdescription(){
      var show = document.getElementById('showdescription');
      var desc = document.getElementById('description');
	
	var div=document.getElementsByTagName("div");

	  for(var i=0;i<div.length;i++)
	  {
	  
	  if(div[i].className == 'wrapper2')
	  {
      if(show.checked == true){
         div[i].childNodes[0].style.display = 'block';
      }else{
         div[i].childNodes[0].style.display = 'none';
      }
	  }
	  }
    }

Open in new window

0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37736695
you can use getElementsByClassName but it wont work in IE.
0
 
LVL 1

Author Comment

by:ScottNL1
ID: 37736963
Thanks Chaituu, i thought it would have been a quick fix but looking at the loop needed i have to give you the totaal code for the description that needes to be toggleble

<div class="place">
    <ul id="drop-elements" class="afdek raam214lin5 ui-sortable">

    <li class="drag ui-draggable" style="display: inline-block; ">
       <div class="itemwrapper">
                <img src="images/bj/centraal/214/wiplamp.png" border="0" alt="Serieschakelaar">
            <div id="description">
                 Wissel<br>controle
            </div>
        </div>
    </li><li class="drag ui-draggable" style="display: inline-block; ">
       <div class="itemwrapper">
                <img src="images/bj/centraal/214/wiplamptext.png" border="0" alt="Serieschakelaar">
            <div id="description">
                Tweepolige<br>controle
            </div>
        </div>
    </li></ul>
</div>

Open in new window

0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37737166
without loop;

  function showdescription(){
      var show = document.getElementById('showdescription');
      var desc = document.getElementById('description');
	
	
		if(show.checked == true){
         document.getElementsByTagName("li")[1].getElementsByTagName("div")[1].style.display = 'block';
      }else{
        document.getElementsByTagName("li")[1].getElementsByTagName("div")[1].style.display = 'none';
      }

    }

Open in new window

0
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 
LVL 1

Author Comment

by:ScottNL1
ID: 37737200
Cheers chaituu but i get the following error:

Uncaught TypeError: Cannot read property 'style' of undefined
0
 
LVL 20

Expert Comment

by:chaitu chaitu
ID: 37737212
its working fine for mr;checked in IE;

  function showdescription(){
      var show = document.getElementById('showdescription');
      var desc = document.getElementById('description');
	
	
		if(show.checked == true){
         document.getElementsByTagName("li")[1].getElementsByTagName("div")[1].style.display = 'block';
      }else{
        document.getElementsByTagName("li")[1].getElementsByTagName("div")[1].style.display = 'none';
      }

    }

<div class="place">
    <ul id="drop-elements" class="afdek raam214lin5 ui-sortable">

    <li class="drag ui-draggable" style="display: inline-block; ">
       <div class="itemwrapper">
                <img src="images/bj/centraal/214/wiplamp.png" border="0" alt="Serieschakelaar">
            <div id="description">
                 Wissel<br>controle
            </div>
        </div>
    </li><li class="drag ui-draggable" style="display: inline-block; ">
       <div class="itemwrapper">
                <img src="images/bj/centraal/214/wiplamptext.png" border="0" alt="Serieschakelaar">
            <div id="description">
                Tweepolige<br>controle
            </div>
        </div>
    </li></ul>
	<input id="showdescription" type="checkbox" onclick="showdescription()" />


</div>

Open in new window

0
 
LVL 18

Assisted Solution

by:nap0leon
nap0leon earned 100 total points
ID: 37737667
Since IDs are supposed to be unique...

1- make the IDs unique ("description1" and "description2").
2- your function requires only a minor modification to target the new ID:
3- minor modification to the CSS to reference the new IDs
4- change "onchange" to "onclick"
5- since ID 2's default is "block", add "checked=true" to the checkbox... otherwise the first checking of the checkbox appears to do nothing.

For sample below, I also updated the text in the descriptions so you can tell them apart.
<style>
.wrapper1 #description1{
  display:none
}

.wrapper2 #description2{
  display:block
}
</style>
<script>
function showdescription(){
      var show = document.getElementById('showdescription');
      var desc = document.getElementById('description2');
      if(show.checked == true){
         desc.style.display = 'block';
      }else{
         desc.style.display = 'none';
      }
    }
</script>
<div class="wrapper1">
   <div id="description1">
   Some description 1
   </div>
</div>
<div class="wrapper2">
   <div id="description2">
   Some description 2
   </div>
</div>
<input id="showdescription" type="checkbox" onclick="showdescription()" checked=true/>

Open in new window

0
 
LVL 20

Accepted Solution

by:
Proculopsis earned 250 total points
ID: 37738216
<!-- This is just the job for a jQuery ONE-LINER -->

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title> - jsFiddle demo by Proculopsis</title>
 
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.7.1.js'></script>
 
 <style type='text/css'>
    .wrapper1 #description{
  display:none
}

.wrapper2 #description{
  display:block
}

 </style>

<script type='text/javascript'>//<![CDATA[

function showdescription() {
    $("div[id=description]", "div[class=wrapper2]").toggle()
}
//]]>  

</script>


</head>
<body>
  <div class="wrapper1">
   <div id="description">
   Some description
   </div>
</div>
<div class="wrapper2">
   <div id="description">
   Some description
   </div>
</div>
<input id="showdescription" type="checkbox" onchange="showdescription()" />

</body>
</html>
0
 
LVL 18

Expert Comment

by:nap0leon
ID: 37738281
If you want "one-liner", you don't need jQuery (though jQuery does make the selectors much shorter and it has a built-in "toggle" method so it saves you from explicitly specifying "block" or "none"):

function showdescription(){
      (document.getElementById('showdescription').checked) ? document.getElementById('description2').style.display = 'block': document.getElementById('description2').style.display = 'none';
}

Open in new window

0
 
LVL 1

Author Closing Comment

by:ScottNL1
ID: 37738313
omg.

how i always like the sound of a one liner. Especially when it works like i intended.  

I have to give chaituu and nap0leon some of the credit for the input. it gave me a better understanding handling this with pure javascript.

@nap0leon. The point of doing it like this has to do with bad coding on my part. I have to clone the info using jquery-ui where the description is hidden in draggable and visible in droppable . I know using multible id's with the same name is a no no.
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

708 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now