Solved

Display none within a div

Posted on 2012-03-19
12
423 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
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
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
 
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

Free Tool: Port Scanner

Check which ports are open to the outside world. Helps make sure that your firewall rules are working as intended.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

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 …
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…

808 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