2

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 happen:

1 The button changes content, that goes from a "+" to a "-", but that is what worries me the least.

2 that a div is displayed with information corresponding to that card and that occupies 100 vw and

3 that if there is a div displayed and the other button on another card is clicked, the first div disappears and the second appears and occupies the 100vw

-----What am I using? I am using HTML5, CSS, Vanilla Js, Bootstrap (mainly for the css)-----

This is what I want to achieve:

enter image description here

enter image description here

enter image description here

This is what I have achieved:

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 () {        
      this.classList.toggle("open");
    }
  };
  window.addEventListener('load', function(){
    jsaccordion.init("accordion-container");
  });
.accordion-text {
  display: none;
  color: #808080;
  padding: 15px;
  border: 1px solid #ffcc4b;
}
.accordion-btn.open + .accordion-text{
  display: block;
}
<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>
some specific and special information for the first div.</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>some specific and special information for the second div.</p>
         </div>
     </div>
</div>
          
</div>

Please help me, I don't know how to do it

Dfor
  • 338
  • 1
  • 3
  • 15
  • Here the answer was completed: D https://stackoverflow.com/questions/63958773/how-to-display-a-div-when-clicking-on-a-button-with-js/63959869#63959869 – Dfor Sep 18 '20 at 18:08

3 Answers3

1

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.

owais shahab
  • 44
  • 7
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>
Bjorn.B
  • 1,473
  • 1
  • 10
  • 11
  • That was great, I only have two drawbacks and I don't know if you have any idea how to fix them: I don't know how to do if I want to use 4 or 6 cards instead of only 2 (3 rows with 2 cards) and another thing would be ... that the responsive design breaks down and doesn't fit – Dfor Sep 16 '20 at 14:05
  • Could you help me with that, please? Do you have any idea how to fix those things? – Dfor Sep 16 '20 at 14:06
0

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>
Dhaval Jardosh
  • 7,151
  • 5
  • 27
  • 69