CODEWITHSUNDEEP
javascripthtmlcss
Timas
Timas

Reputation: 1

How to make accordion to shrink when other tab is open

I`m trying to make my acordion to do what i want. Now it works just fine, but I want to make one tab to shrink while other is being opened. Basically I want to have open just one tab at the time. Here is the code:

HTML:

    <button class="accordion">Kontaktai</button>
  <div class="panel">

    <ul style="list-style-type:none; text-align: center; margin-left: -35px;">
      <p style="font-size: 15px; font-weight: bold;">Text</p>


  </div>

  <button class="accordion">Kaip mus rasti?</button>
  <div class="panel">
      <p style="font-size: 15px; font-weight: bold; text-align: center;">Text</p>

  </div>

  <button class="accordion">Apie mus</button>
  <div class="panel">
    <p>Text</p>
  </div>

JS:

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

  for (i = 0; i < acc.length; i++) {
    acc[i].onclick = 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>

I hope you understood what I want from this code.

Upvotes: 0

Views: 369

Answers (3)

techhunter
techhunter

Reputation: 693

You can use jquery accordion plugin for this. It gives many advanced features. Hope this link will help you.

Upvotes: 0

Mayank Tiwari
Mayank Tiwari

Reputation: 1040

well the code is recursive and redundant but it will work fine for removing active class from your elements, you can add up more operations as you need:

var acc = document.getElementsByClassName("accordion");
  var i;
  for (i = 0; i < acc.length; i++) {
	acc[i].onclick = function() {
	  var acc = document.getElementsByClassName("accordion");
	  var i;
	  for (i = 0; i < acc.length; i++) {
		  acc[i].className = acc[i].className.replace("active","");
	  }
      this.classList.toggle("active");
      var panel = this.nextElementSibling;
      if (panel.style.maxHeight){
          panel.style.maxHeight = null;
      } else {
          panel.style.maxHeight = panel.scrollHeight + 'px';
      }
    }
  }
.active{
  background:yellow;
}
	 <button class="accordion">Kontaktai</button>
  <div class="panel">

    <ul style="list-style-type:none; text-align: center; margin-left: -35px;">
      <p style="font-size: 15px; font-weight: bold;">Text</p>


  </div>

  <button class="accordion">Kaip mus rasti?</button>
  <div class="panel">
      <p style="font-size: 15px; font-weight: bold; text-align: center;">Text</p>

  </div>

  <button class="accordion">Apie mus</button>
  <div class="panel">
    <p>Text</p>
  </div>

Hope this helps.

Upvotes: 1

Anjana Shyamlal
Anjana Shyamlal

Reputation: 408

<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(".accordion").click(function () {
    if($(this).hasClass('active')){
      $(this).toggleClass("active");
      $(this).next(".panel").toggle();
    }else{
      $(".accordion").removeClass("active");
      $(".panel").hide();
      $(this).addClass("active");
      $(this).next(".panel").toggle();
    }

});</script>

Please try this. It worked for me.

Upvotes: 0

Related Questions