Clear all the open div's

Question

I have a script that open's div's by doing an onclick="toogle_visibility(id)

event but how do i do when i want to close the div that is open and open

the new div ?

Javascript/jQuery:

function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}

HTML:

<div class="navBar">
<a href="#social" onclick="toggle_visibility('Social')">Social</a>
<a href="#social" onclick="toggle_visibility('Foljer')">F&ouml;ljer</a>
<a href="#social" onclick="toggle_visibility('Bokmarken')">Bokm&auml;rken</a>
</div>
<div id="Social">
<a href="http://www.twitter.com/Liam_Rab3">@Liam_Rab3 - TWITTER</a><br>
<a href="http://www.twitter.com/Liam_Rab3">@Liam_Rab3 - INSTAGRAM</a><br>
<a href="http://www.facebook.com/LiamRab3">@LiamRab3- FACEBOOK</a><br>
<a href="http://www.youtube.com/howmuchtimedr">@Liam_Rab3 - YOUTUBE</a><br>
<a href="http://www.flickr.com/Liam_Rab3">@Liam_Rab3 - FLICKR</a><br>
<a href="http://www.thenotallowedguy.tk">@Liam_Rab3 - TUMBLR</a><br>
</div>
<div id="Foljer">
<a href="http://www.instagram.com/sebbestakset">Sebbe Stakset (Kartellen)</a>
</div>

CSS:

a:link {
color:white;
text-decoration:none;
-o-transition:.5s;
-ms-transition:.5s;
-moz-transition:.5s;
-webkit-transition:.5s;
transition:.5s;
}
a:hover {
color:white;
text-decoration:none;
font-size:100%;
}
a:visited {
text-shadow:0px 0px 0px #0066BB;
color:white;
}
#social {
display:none;
}
#Foljer {
display:none;
}

DISCLAIMER!

These links in the #social and #bokmarken links is'nt for commercial purpose.

[Stop putting JavaScript in HTML comments.](http://stackoverflow.com/questions/2944764/wrapping-javascript-in) — Alexis King, Jan 04 '14 at 01:28
Do you only want to allow one of the selected divs ['Social', 'Foljer', 'Bokmarken'] to be opend at once, or can multiple menus be opened? — ZombieBunnies, Jan 04 '14 at 01:32
We say i click on 'Foljer' but then i want to open 'Social' so the 'Foljer' div closes and the 'Social' div opens — Liam_Rab33, Jan 04 '14 at 01:36
possible duplicate of [toggle show/hide div with button?](http://stackoverflow.com/questions/4528085/toggle-show-hide-div-with-button) — Ryan Brodie, Jan 04 '14 at 01:57

Nagaraj Tantri · Answer 1 · 2014-01-04T02:34:01.720

1

You can use JQuery Toggle

<div id="clickme">
  Click here !!!
</div>
<a href="#social" >Social</a>

$( "#clickme" ).click(function() {
  $( "#social" ).toggle(); //With no parameters, the .toggle() method simply toggles the visibility of elements:
});

First choose the control you are willing to hide/show, then use that control's id as follows:

$('#<id-of-that-control>').toggle();

Now you can call that in the onclick event handler of a button or div as you wish.

How it might appear for you is:

JS

function toggle_visibility(id) {
     $('#' + id).toggle();
}

HTML

<div class="navBar">
<a href="#social" onclick="toggle_visibility('Social')">Social</a>
<a href="#social" onclick="toggle_visibility('Foljer')">F&ouml;ljer</a>
<a href="#social" onclick="toggle_visibility('Bokmarken')">Bokm&auml;rken</a>
</div>

Update: As pointed out by Brodie, seemingly you might always look into the solution provided by Niet the Dark Absol. As he provides you a pure JS implementation. My solution will give you insight of using a library like JQuery and it's API of toggle. Jquery provides a wide range of built-in functionality that helps you to do things quickly. What my piece of code provides you is usage of an api i.e. toggle, which when used will be same as the hide and show behavior.

edited Jan 04 '14 at 02:34

answered Jan 04 '14 at 01:29

Nagaraj Tantri

5,172
12
54
78

Can i change the $( "#book" ).toggle( "slow", function() { with $( "id" ).toggle( "slow", function() { or something like that ? – Liam_Rab33 Jan 04 '14 at 01:31
Yeah, or just right one function and bind it to the element with $(this).click(function() – ZombieBunnies Jan 04 '14 at 01:35
1

So... basically you're taking perfectly functional JavaScript, bloating it up like no tomorrow with jQuery, and still not actually doing what OP wants...? – Niet the Dark Absol Jan 04 '14 at 01:53
I swear no one can actually write pure JS anymore. – Ryan Brodie Jan 04 '14 at 01:55
@Niet the Dark Absol firstyl, there is a tag of JQuery and also, if everything we provide the complete code, then we still dont ensure that the user will learn on his own anything. He would start using the same logic we provide. So the link of toggle is important for him to understand by reading the usage. – Nagaraj Tantri Jan 04 '14 at 01:56
@LearningByCoding There's a [pure JS implementation](http://stackoverflow.com/a/4528122/1095883) there. – Ryan Brodie Jan 04 '14 at 02:00
@Brodie Okay fare enough, so let me say, yet the answer selected as jquery toggle. I still do not get it, the tag says jquery also, whats wrong for that? Why downvote? – Nagaraj Tantri Jan 04 '14 at 02:03
@LearningByCoding It's clear the OP isn't knowledgeable of the differences between pure Javascript and a library like jQuery based on his mislabelling of the code snippet (it contained zero jQuery). I downvoted the OP as it's a duplicate. I haven't upvoted your own answer as I agree with above: his question and level of presumed understanding can be cleared up with pure JS along with a helpful explanation of when it's appropriate to include such a library. – Ryan Brodie Jan 04 '14 at 02:12
@Brodie Fare enough. Have updated the answer so that he can choose the knowledge of pure JS. – Nagaraj Tantri Jan 04 '14 at 02:34
`toggle` isn't even the appropriate function, because OP wants to close whichever one is open... – Niet the Dark Absol Jan 04 '14 at 10:58

score 0 · Answer 2 · answered Jan 04 '14 at 01:52

Basically, you need to close all DIVs, and toggle the current one.

Try this:

var ids = ['Social','Foljer','Bokmarken'];
function toggle_visibility(id) {
   var l = ids.length, i, e;
   for( i=0; i<l; i++) {
       e = document.getElementById(ids[i]);
       if( id != ids[i])
          e.style.display = 'none';
       else if(e.style.display == 'block')
          e.style.display = 'none';
       else
          e.style.display = 'block';
    }
}

Clear all the open div's

2 Answers2