0

I created Accordion HTML code for certain element in Joomla builder, but some of the Accordion is not working. FYI, all the Accordion code is in the same page. For first element is working fine, but the second is not. Even though I used the same method.

Here is my code:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
    .accordion {
      background-color: #E1F0E6;
      color: #003F77;
      cursor: pointer;
      padding: 18px;
      width: 100%;
      border: none;
      text-align: left;
      outline: none;
      font-size: 15px;
      transition: 0.4s;
    }

    .active, .accordion:hover {
      background-color: #A3C1AD;
    }

    .accordion:after {
      text-align: justify;
      content: '\002B';
      color: #003F77;
      font-weight: bold;
      float: right;
      margin-left: 5px;
    }

    .active:after {
      content: "\2212";
    }

    .panel {
      padding: 0 18px;
      background-color: white;
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.2s ease-out;
    }
    </style>
</head>
<body>
    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }
    </script>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }
    </script>

</body>
</html>

Anyone can help me for this matters? :) Thank you!

  • 1
    Welcome to JSE. Are you getting any errors in the browser console? – Lodder Jan 2 at 10:49
  • 2
    Can you clarify why you have tagged this question as Joomla versions: 2.5, 3.x, 3.3, 3.4, and 3.6? What version are you actually using? I just pasted your snippet into w3schools.com/jsref/… and it seems to be working for me. Do you have other scripts interfering? What does your generated source code look like? Perhaps your demo doesn't accurately represent your actual project html. – mickmackusa Jan 2 at 12:10
  • @mickmackusa The problem when I used that code to other element, its not functioning. First element working fine, the second element is not. – Miza Jan 3 at 6:06
  • I understand. We need more information to be able to help you. – mickmackusa Jan 3 at 6:26
  • @Miza please provide all requested details. Otherwise this page will need to be closed as "cannot be reproduced". – mickmackusa Jan 5 at 1:55
1

The problem seems to be multiple accordions with the same class name if your code is doubled. Create all accordions above javascript at the bottom of the body and it should open all created. I put a row break in to separate the accordions.

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
.accordion {
  background-color: #E1F0E6;
  color: #003F77;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
  transition: 0.4s;
}

.active, .accordion:hover  {
  background-color: #A3C1AD;
}

.accordion:after {
  text-align: justify;
  content: '\002B';
  color: #003F77;
  font-weight: bold;
  float: right;
  margin-left: 5px;
}

.active:after {
  content: "\2212";
}

.panel {
  padding: 0 18px;
  background-color: white;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

</style>
</head>
<body>
    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <br />

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <button class="accordion">Question</button>
    <div class="panel">
      <p>Answer</p>
    </div>

    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc[i].addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.maxHeight) {
          panel.style.maxHeight = null;
        } else {
          panel.style.maxHeight = panel.scrollHeight + "px";
        } 
      });
    }
    </script>

</body>
</html>
| improve this answer | |
  • How can you make this deduction after we agree that this issue cannot be reproduced with the details provided? How can you confidently fix something that you can't replicate. This is a blind-guess about what might fix the OP's problem. Doubling the css and javascript is not an elegant solution. I should have closed this page earlier. Even if your suggestion fixes the issue, the question lacks clarity and will not invite additional answers (like a good clear question should). – mickmackusa Jan 7 at 11:56
  • Creating redundant scripting is definitely not best practice. If someone wants to resort to less elegant coding practices, they are free to, but I wouldn't be suggesting it. If someone needs individual styling, you add another class or use eq or some other technique to isolate a specific element then add only that extra colour/bg/whatever. Duplicating whole chunks of css/js or declaring multiple selectors that share exact styles/behaviors is suboptimal. Classes are designed to be target-able non-unique identifiers; this is a feature to enjoy not avoid. – mickmackusa Jan 8 at 0:38
  • I appreciate your toil, but the OP's specific issue is not clear / cannot be replicated. We have no way of knowing if your suggestion will solve the OP's issue. It is entirely possible that there is a typo somewhere or some other interference. – mickmackusa Jan 8 at 6:47
  • Cool, I didn't know you could make your own save-able demos on w3schools. In your demo, the first set of elements is not working, but the second set is. The OP is saying that the first set IS working, but the second set IS NOT. I think the second js block needs to be removed to replicate it. w3schools.com/code/tryit.asp?filename=GAP7QP8RTBM6 In other words, elements are added to the dom AFTER the javascript assigns the listeners to "all" of the elements -- so it is a "time of execution" issue. – mickmackusa Jan 8 at 7:25

Not the answer you're looking for? Browse other questions tagged or ask your own question.