如何在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

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");
});

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

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