How Do I Toggle Tabs in JQuery

Question

I am trying to create a tabbed content area which opens and closes each section. My HTML is as follows:

<a href="" class="toggle"></a>
<div class="more-info">
    <p>HELLO</p>
</div>

<a href="" class="toggle"></a>
<div class="more-info">
    <p>GOODBYE</p>
</div>

The JQuery is

    $("a.toggle").click(function () {
        $(this).find(".more-info").slideToggle("slow");
    });

and my styles are :

a.open {display:block; width:30px; height:30px; background:#999;}
.more-info {display:none; width:100%;}

The idea is to click on the a link and open the it's content box. How do I do this? Doesn't seem to work? The only thing is I can't use unique IDs as the way the page will be created. Therefore, this has to work on a generic class.

Answer 1

Check this well designed toggle effect

$('#ce-toggle').click(function(event) {
   $('.plan-toggle-wrap').toggleClass('active');
});

$('#ce-toggle').change(function(){
      if ($(this).is(':checked')) {
        $('.tab-content #yearly').hide();
        $('.tab-content #monthly').show();
      }
      else{
        $('.tab-content #yearly').show();
        $('.tab-content #monthly').hide();
      }

    });

body{
  margin:0;
}
.plan-toggle-wrap {
	text-align: center;
	padding: 10px;
	background-color: rgb(75,88,152);
  position:sticky;
  top:0;
}
.toggle-inner input {
  position: absolute;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border-radius: 25px;
  right: 0;
  z-index: 1;
  opacity: 0;
  cursor: pointer;
}
.custom-toggle {
  position: absolute;
  height: 25px;
  width: 25px;
  background-color: #ffffff;
  top: 4px;
  left: 5px;
  border-radius: 50%;
  transition: 300ms all;
}
.toggle-inner .t-month, .toggle-inner .t-year {
  position: absolute;
  left: -70px;
  top: 5px;
  color: #ffffff;
  transition: 300ms all;
}
.toggle-inner .t-year {
  left: unset;
  right: -85px;
  opacity: 0.5;
}
.active > .toggle-inner .t-month {
  opacity: 0.5;
}
.active > .toggle-inner .t-year {
  opacity: 1;
}
.toggle-inner input:checked + span {
  left: 43px;
}
.toggle-inner {
  width: 75px;
  margin: 0 auto;
  height: 35px;
  border: 1px solid #ffffff;
  border-radius: 25px;
  position: relative;
}

.tab-content > div {
	display: flex;
	justify-content: center;
	align-items: center;
	background-color: rgb(94,110,191);
	color: #fff;
	height: 100vh;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="plan-toggle-wrap">
              <div class="toggle-inner">
                <input id="ce-toggle" type="checkbox">
                <span class="custom-toggle"></span>
                <span class="t-month">Yearly</span>
                <span class="t-year">Monthly</span>
              </div>
   </div>
<div class="tab-content">
  <div id="monthly">MONTHLY</div>
  <div id="yearly">YEARLY</div>
</div>

https://codepen.io/Vikaspatel/pen/yRQrpZ

Answer 2

Try this :

$("a.toggle").on('click', function (e) {
    e.preventDefault();
    var $a = $(this).next(".more-info");
    if($a.is(':visible')){
        $a.hide();
    }else{      
        $a.show();
    }
});

Answer 3

You need to slide the required section down and any currently open section up.

Try :

$("a.toggle").on('click', function (e) {
    e.preventDefault();
    var $section = $(this).next(".more-info").slideDown("slow");
    $(".more-info").not($section).slideUp("fast");
});