Can we use same button to hide/show multiple divs

Question

I have 3 anchor tag buttons and 6 divs, i want to assign 2 divs each for a button and when clicked both the assigned divs should get displayed/hidden accordingly.

I was able to hide/show the 1st 3 divs using below code however for next 3 divs(image section) my code is not working

html:

//button section
 
   
      Widget
      Widget
      Widget
   
//1st 3 divs
   
      
         Tabs with soft transitioning effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
      
         Tabs Different effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
      
         Tabs most of effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
   

//next 3 divs(image section)

js:

function show(elementId) { 
    document.getElementById("id1").style.display="none";
    document.getElementById("id2").style.display="none";
    document.getElementById("id3").style.display="none";
    document.getElementById(elementId).style.display="block";
}

Any alternative method to show/hide both the divs when clicked the assigned button?

user_1060051 · Answer

You should look at including jQuery into your project. jQuery provides this functionality already.

Add this code inside your html tag:

And then you will be able to utilise the following functions in this case - the toggle function where you can toggle classes of your specified elements:

$( "#id1, #id2, #id3" ).toggle(
  function() {
    $( this ).addClass( "show" );
  }, function() {
    $( this ).removeClass( "hide" );
  }
);

See the jquery documentation for toggle and click events:

https://api.jquery.com/toggle-event/

https://api.jquery.com/click/

and generically the jQuery documentation to find other similar functionality:

https://api.jquery.com

If you add bootstrap to your project, the show and hide classes would already be included in your project.. and provide the functionality that you desire.

I hope this helps.

user_10761855 · Answer

you can use .querySelectorAll method and hide all this elements

function show(elementId) { 
    [].slice.call(document.querySelectorAll(".myBlock"),0).map(e=>e.style.display="none")
    document.getElementById(elementId).style.display="block";
}

//button section
 
   
      Widget
      Widget
      Widget
   
//1st 3 divs
   
      
         Tabs with soft transitioning effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
      
         Tabs Different effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
      
         Tabs most of effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
   

//next 3 divs(image section)

user_7897395 · Answer

You are using the same id twice. This is not allowed. I've changed your HTML to correct this problem. I hope this helps.

function show(elementId) { 
   let divs = Array.from(document.querySelectorAll("[id ^= 'did']"));
   let imgs = Array.from(document.querySelectorAll("[id ^= 'iid']"));
   divs.forEach(d=>{d.style.display="none"})
   imgs.forEach(i=>{i.style.display="none"})
   document.getElementById("d"+elementId).style.display="block";
   document.getElementById("i"+elementId).style.display="block";
    }


   
      Widget1
      Widget2
      Widget3
   

   
      
         Tabs with soft transitioning effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
      
         Tabs Different effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download
      
      
         Tabs most of effect.
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet. Proin gravida dolor sit amet lacus accumsan et viverra 
            justo commodo. Proin sodales pulvinar tempor. Cum sociis natoque 
            penatibus et magnis dis parturient montes.
         
         Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         
         Download

user_9986145 · Answer

Since the document.getElementById() will gives you the first matched element, so you will be changing the first matched element's style only, not the second one.

You can consider changing the id attribute with a class, as the id attribute is meant to be unique.

// remove the id attribute if it's not used in other places
// class-replacement-for-id1 here is just a placeholder, it can be anything you want

And then use document.querySelectorAll('.class-replacement-for-id1') to select the elements

function toggleDisplay(className) { 
    var elements = document.querySelectorAll('.' + className);

    for (var i = 0; i < elements.length; i++) {
        elements[i].style.display = elements[i].style.display === 'none' ? 'block' : 'none';
    }
}

Can we use same button to hide/show multiple divs

4 Answers