Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript

How To Display Different Div On Button Click With JS?

Post a Comment
I am trying to make a section where there are 2 cards, each one with a button and a small descriptive text. What I am trying to achieve is that when I click on the button 3 things

Solution 1:

It is a lot easier to do this in jQuery, but here is how I would approach it using Vanilla JS.

  • The idea is that to center something that is based on neither elements, but moreso the browser window, is to use a shared container (outside of either element) to print to. This takes the guess work out of positioning as well.
  • On clicking the button, the information should be copied from the accordion, and printed to the target container. Also on that click, check if the other is active to remove the active class. Adding classes to the active container to change the button symbol + and -, using CSS pseudo-elements.
  • Keeping the arrows inside the accordion containers will also make it easier to position them according to the HTML element it is in.
  • Sidenote: You should only use an HTML ID once on the entire page, otherwise use a class for multiple instances. This is in reference to #accordion-container.

var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');

var jsaccordion = {
    init : function (target) {  
        var headers = document.querySelectorAll("#" + target + " .accordion-btn");
        if (headers.length > 0) { for (var head of headers) {
            head.addEventListener("click", jsaccordion.select);
        }}
    },

    select : function () {        
        var targ1 = this.parentElement.closest('#accordion-container'), // find parent
            targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container

        if( targ1.classList.contains('active') ){ 

            // when clicked, if active, reset them all
            targ1.classList.remove('active');
            sharedCont.innerHTML = '';
            sharedCont.classList.remove('active');

        } else {
            // when clicked, reset them all, then activate
            for (let i = 0; i < allCont.length; i++) {
                var el = allCont[i];
                el.classList.remove('active');
            }

            targ1.classList.add('active');
            sharedCont.innerHTML = targText;
            sharedCont.classList.add('active');

        }
    }
};
window.addEventListener('load', function(){
    jsaccordion.init("accordion-container");
});
body {
    max-width: 90%;
    margin: 0 auto;
    overflow: hidden;
}
#accordion-container {
    position: relative;
}
#accordion-container button::before {
    content: '+' !important;
}
#accordion-container.active button::before {
    content: '-' !important;
}
#accordion-container.active::after {
    content: '';
    width: 0; 
    height: 0; 
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-bottom: 15px solid orange;
    position: absolute;
    bottom: -2rem;
    left: 50%;
    transform: translateX(-50%);
    color: orange;
    z-index: 100;
    font-size: 3rem;
    line-height: 1;
}
#accordion-container .accordion-text {
    display: none;
    color: #808080;
    padding: 15px;
    border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
    display: block;
} */

#shared-container {
    margin-top: 2rem;
    display: block;
    width: 100%;
    padding: 2rem;
    border: 1px solid orange;
    display: none;
}
#shared-container.active {
    display: block;
    text-align: center;
}
#shared-container p {
    margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>Testing testing testing</h1>

    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

    <div class='row'>
        <div id="accordion-container" class='col-6'>
            <div class="my-3">
            <h3 class=" text-center">First one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
                <div class="accordion-text">
                    <p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
                </div>
            </div>
        </div>
                
        <div id="accordion-container" class='col-6'>
            <div class="my-3">
            <h3 class='text-center'>second one</h3>
            <button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
                
                <div class="accordion-text">
                    <p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
                </div>
            </div>
        </div>
                
    </div>
    <div id="shared-container"></div>
</body>
</html>

Solution 2:

Its very simple you can assign id or class to those div, you want to hide or show then use javascript or jquery method to show and hide on the specific event click.


Solution 3:

A small snippet of working example. It can be optimized and made dynamic.

Also as Owais suggested, we can simply use .show() and .hide() instead of .addClass() and .removeClass()

var firstDiv = $("#div-1-1");
var secondDiv = $("#div-1-2");

$(document).ready(function() {
  //On Click of 1st Div, we're also toggling the 2nd DIV in case if it was open
  // Can handle in a better way as well
  // Same goes for the 2nd div
  firstDiv.click(() => {
    $(".dc-11").addClass("open");
    $(".dc-12").removeClass("open");
  });

  secondDiv.click(() => {
    $(".dc-12").addClass("open");
    $(".dc-11").removeClass("open");
  });
});
.outer-block {
  width: 200px;
  margin: auto;
}

.block {
  display: flex;
}

.block>div {
  flex: 1;
  text-align: center;
  border: 2px solid red;
  height: 80px;
}

.open {
  display: block !important;
}

.dc-11 {
  background: red;
  display: none;
}

.dc-12 {
  background: orange;
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <div class='outer-block'>
    <div class="block">
      <div>
        <p>First</p>
        <button id="div-1-1">+</button>
      </div>
      <div>
        <p>Second</p>
        <button id="div-1-2">+</button>
      </div>

    </div>
    <div id="div-1-1-content" class="dc-11">First Div Content will be displayed here</div>
    <div id="div-1-2-content" class="dc-12">Second Div Content will be displayed here</div>
  </div>
</div>

Post a Comment for "How To Display Different Div On Button Click With JS?"