Can we use same button to hide/show multiple divs

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
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>

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?

Answers:

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";
    }
<div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me" class="trans-btn selected" onclick="show('id1');">Widget1</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id2');">Widget2</a></div>
      <div class="mx-2"><a id="me" class="trans-btn" onclick="show('id3');">Widget3</a></div>
   </div>
<!--1st 3 divs-->
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2" id="did1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2" id="did3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

<!--next 3 divs(image section)-->
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="iid1"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/pin.png"/></div>
      <div class="mx-2" id="iid2" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#blackcat"/></div>
      <div class="mx-2" id="iid3" style="display:none;"><img class="img-fluid" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/222579/cat.svg#redcat"/></div>
   </div>
</div>

Answer

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

Add this code inside your html tag:

<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>

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.

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
 <div class="row">
   <div class="col-4 col-sm-2 col-lg-2">
      <div class="mx-2"><a id="me1" class="trans-btn selected" onclick="show('id1');">Widget</a></div>
      <div class="mx-2"><a id="me2" class="trans-btn" onclick="show('id2');">Widget</a></div>
      <div class="mx-2"><a id="me3" class="trans-btn" onclick="show('id3');">Widget</a></div>
   </div>
//1st 3 divs
   <div class="col-8 col-sm-5 col-lg-5">
      <div class="mx-2 myBlock" id="id1">
         <h3>Tabs with soft transitioning effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2 myBlock" id="id2" style="display:none;">
         <h3>Tabs Different effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
      <div class="mx-2 myBlock" id="id3" style="display:none;">
         <h3>Tabs most of effect.</h3>
         <p>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.
         </p>
         <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod 
            bibendum laoreet.
         </p>
         <a class="btn-warning" href="">Download</a>
      </div>
   </div>

//next 3 divs(image section)
   <div class="col-12 col-sm-5 col-lg-5 last-sec">
      <div class="mx-2" id="id1"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id2" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
      <div class="mx-2" id="id3" style="display:none;"><img class="img-fluid" src="assets/images/shadow-img.png"/></div>
   </div>
</div>

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
<div class="mx-2 class-replacement-for-id1" id="id1">

<div class="mx-2 class-replacement-for-id1" id="id1">
    <img class="img-fluid" src="assets/images/shadow-img.png"/>
</div>

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';
    }
}

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.