Hiding an accordion type panel on second click

Question

Hey guys so I got the following jquery set up:

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
        var panel = $(this).closest('.tab-panels');

        panel.find('.tabs li .active').removeClass('active');
        $(this).addClass('active');

        var panelToShow = $(this).attr('rel');

        panel.find('.panel.active').slideUp(500, nextPanel);

        function nextPanel() {
            $(this).removeClass('active');
            $('#'+panelToShow).slideDown(500, function(){
                $(this).addClass('active');
            });
        }

        });

    });

http://jsfiddle.net/x1zw352t/4/

So when you click to expand a panel the currently expanded one closes and the new appears. If you click on the same one it will just slide up and then right back down.

How can I make it so that the same panel closes if I click on the associated link for the second time and create more of a toggle effect?

** it still needs to remove the current tab and replace with a different one if a different one is clicked, not just a simple slideToggle effect *

Thank you.

Answer 1

Try this code:

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
		var panel = $(this).attr('rel')
        //$('.panel').slideUp();
		$('#'+panel).slideToggle();
		
    });    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-panels">
					<ul class="tabs">
						<li rel="panel1">panel1<div id="students-btn" class="panel-btn"></div></li>
						<li rel="panel2">panel2<div id="parents-btn" class="panel-btn"></div></li>
						<li rel="panel3">panel3<div id="faculty-btn" class="panel-btn"></div></li>
						<li rel="panel4">panel4<div id="schools-btn" class="panel-btn"></div></li>
					</ul>
				

					<div id="panel1" class="panel active">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel2" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel3" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel4" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>

OR Try this:

$(document).ready(function(){
    $('.tab-panels .tabs li').click(function(){
		var panel = $(this).attr('rel')
        $('.panel').slideUp();
		$('#'+panel).slideToggle();
		
    });    
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-panels">
					<ul class="tabs">
						<li rel="panel1">panel1<div id="students-btn" class="panel-btn"></div></li>
						<li rel="panel2">panel2<div id="parents-btn" class="panel-btn"></div></li>
						<li rel="panel3">panel3<div id="faculty-btn" class="panel-btn"></div></li>
						<li rel="panel4">panel4<div id="schools-btn" class="panel-btn"></div></li>
					</ul>
				

					<div id="panel1" class="panel active">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel2" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel3" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>
    
    					<div id="panel4" class="panel">
						Lorem ipsum dolor sit amet, consectetur adipisicing elit. Provident unde aspernatur repellendus inventore quo eum voluptates et quis assumenda debitis totam reiciendis? Libero molestiae modi officia voluptatibus reprehenderit nam debitis.
					</div>

Answer 2

call nextpanel()

   $(document).ready(function(){
        $('.tab-panels .tabs li').click(function(){
            var panel = $(this).closest('.tab-panels');

            panel.find('.tabs li .active').removeClass('.active');
            $(this).addClass('.active');

            var panelToShow = $(this).attr('rel');

            **panel.find('.panel.active').slideUp(500, nextPanel());**

            function nextPanel() {
                $(this).removeClass('active');
                $('#'+panelToShow).slideDown(500, function(){
                    $(this).addClass('active');
                });
            }

            });

        });