How To Display Different Div On Button Click With Js?

June 22, 2024 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 containerif( 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 activatefor (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-containerbutton::before {
    content: '+'!important;
}
#accordion-container.activebutton::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-containerp {
    margin: 0;
}

<!DOCTYPE html><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><title>Document</title></head><body><h1>Testing testing testing</h1><linkhref="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css"rel="stylesheet"/><divclass='row'><divid="accordion-container"class='col-6'><divclass="my-3"><h3class=" text-center">First one</h3><buttonclass='mx-auto d-block accordion-btn btn btn-white border-primary'></button><divclass="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><divid="accordion-container"class='col-6'><divclass="my-3"><h3class='text-center'>second one</h3><buttonclass='mx-auto d-block accordion-btn btn btn-white border-primary'></button><divclass="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><divid="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;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><div><divclass='outer-block'><divclass="block"><div><p>First</p><buttonid="div-1-1">+</button></div><div><p>Second</p><buttonid="div-1-2">+</button></div></div><divid="div-1-1-content"class="dc-11">First Div Content will be displayed here</div><divid="div-1-2-content"class="dc-12">Second Div Content will be displayed here</div></div></div>

Build Html5

How To Display Different Div On Button Click With Js?

Solution 1:

Solution 2:

Solution 3:

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