Still celebrating National IT Professionals Day with 3 months of free Premium Membership. Use Code ITDAY17

x
?
Solved

Display none within a div

Posted on 2012-03-19
12
Medium Priority
?
444 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 600 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
The top UI technologies you need to be aware of

An important part of the job as a front-end developer is to stay up to date and in contact with new tools, trends and workflows. That’s why you cannot miss this upcoming webinar to explore the latest trends in UI technologies!

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

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Finding original email is quite difficult due to their duplicates. From this article, you will come to know why multiple duplicates of same emails appear and how to delete duplicate emails from Outlook securely and instantly while vital emails remai…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

670 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