Solved

Display none within a div

Posted on 2012-03-19
12
431 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
Revamp Your Training Process

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action.

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

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

Suggested Solutions

Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
In this tutorial viewers will learn how to code links for mobile sites that, once clicked, send a call or text to a specified number. For a telephone link (once clicked, calls a number), begin with a normal "<a href=" link tag. For the href, specify…

759 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