CODEWITHSUNDEEP
javascriptfunctionhtmlhide
user1841541
user1841541

Reputation: 11

Function to hide multiple divs

I hope, somebody can explain me where I'm wrong with my code...So I have this function:

function divdisplay(element){
  if(document.getElementById(element).style.display == 'none'){
     document.getElementById(element).style.display = 'block';
     for (var i=0; i<NUMBER_OF_DIVS; i++)
       document.getElementById(i).style.display = 'none';
  } else
     document.getElementById(element).style.display = 'none';

The function displays the divs just fine, but the hiding part is the problem. I want to hide several other <divs>. The ids of these other <divs> are simple numbers, which is why I try to address these elements with the variable i. But when I click on <div> #1 while <div> #2 is already visible, only <div> #1 appears and <div> #2 does not disappear. The <divs> look like this:

    <div id="1" style="display:none;">
      <a href="javascript:divdisplay(1);">
        <img src="..."/>
      </a>
    </div>

    <div id="2" style="display:none;">
      <a href="javascript:divdisplay(2);">
        <img src="..." />
      </a>
    </div>

    <div id="3" style="display:none;">
      ...

And they first appear when the corresponding link

    <a href="javascript:divdisplay(1);">
    <a href="javascript:divdisplay(2);">
    <a href=...

is clicked.

The image in each <div> is linked to the function again, so a click on the image inside the <div> hides it again, but a click on another link does not make the visible <div> disappear again. Where did I go wrong?

Thanks in advance anyway.

Upvotes: 1

Views: 3004

Answers (2)

Cerbrus
Cerbrus

Reputation: 72857

This function loops through all your divs and only shows the one you specify in element

function divdisplay(element){
    for (var i=0; i<NUMBER_OF_DIVS; i++){
        var div = document.getElementById('div'+i);
        if(i == element){
            div.style.display = 'block';
        }else{
            div.style.display = 'none';
        }
    }
}
// As Alnitak suggested, this can be condensed into:
function divdisplay(element){
    for (var i=0; i<NUMBER_OF_DIVS; i++){
        document.getElementById('div'+i).style.display = (i == element)? 'block' : 'none';
    }
}

I prefer not to use jQuery in small functions like this, because it'll save you from loading a library (-1 HTTP request), and the native functionality is simply faster. (Not significant at this amount of code, but still)
Assuming you're not using jQuery already, that is. If you are, this will work:

Assuming you add a class to all elements like this:

<div class="hideMe" id="1" style="display:none;">
  <a href="javascript:divdisplay(2);">
    <img src="..." />
  </a>
</div>

jquery:

function divdisplay(element){
     $(".hideMe").hide();
     $("#"+element).show();
}

Upvotes: 0

Sentencio
Sentencio

Reputation: 230

Why you don't use Jquery? You only have to add a class to each div you want to hide/show

<div class="test">content here</div>

and now you can use show() and hide() from jquery.

$(".test").show(); and $(".test").hide(); will show/hide all div's with the class test.

You also check out show() and hide().

In addition you have chance to add an effect to your show() and hide() function.

Upvotes: 1

Related Questions