Display none within a div

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?
LVL 1
ScottNL1Asked:
Who is Participating?
 
ProculopsisConnect With a Mentor Commented:
<!-- 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
 
chaitu chaituCommented:
  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
 
chaitu chaituCommented:
it should be onclick
<input id="showdescription" type="checkbox" onclick="showdescription()" />
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
chaitu chaituConnect With a Mentor Commented:
  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
 
chaitu chaituCommented:
you can use getElementsByClassName but it wont work in IE.
0
 
ScottNL1Author Commented:
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
 
chaitu chaituCommented:
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
 
ScottNL1Author Commented:
Cheers chaituu but i get the following error:

Uncaught TypeError: Cannot read property 'style' of undefined
0
 
chaitu chaituCommented:
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
 
nap0leonConnect With a Mentor Commented:
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
 
nap0leonCommented:
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
 
ScottNL1Author Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.