jQuery toggle buttons to show matching content in sliding panel I have a sliding panel that I want to show content in. The content that I want to appear depends on the button that triggers the sliding panel. My project is growing rapidly and I would like to reusable jQuery code or perhaps a plugin. My code works, for example sake I have 6 buttons and 6 hidden divs in side of a sliding panel as shown in the image below:



Upon clicking a button i want to open the sliding panel and show the corresponding content. As of now I have done so by doing this:

Buttons code:

&lt;div&gt;
    &lt;button id="p1" data-toggle="slidingPanel"&gt;&lt;/button&gt;
    &lt;button id="p2" data-toggle="slidingPanel"&gt;&lt;/button&gt;
    &lt;button id="p3" data-toggle="slidingPanel"&gt;&lt;/button&gt;
    &lt;button id="p4" data-toggle="slidingPanel"&gt;&lt;/button&gt;
    &lt;button id="p5" data-toggle="slidingPanel"&gt;&lt;/button&gt;
&lt;/div&gt;


Sliding Panel and content divs

&lt;div class="slidingPanel"&gt;
    &lt;div class="buttonContent" id="p1content"&gt;&lt;/div&gt;
    &lt;div class="buttonContent" id="p2content"&gt;&lt;/div&gt;
    &lt;div class="buttonContent" id="p3content"&gt;&lt;/div&gt;
    &lt;div class="buttonContent" id="p4content"&gt;&lt;/div&gt;
    &lt;div class="buttonContent" id="p5content"&gt;&lt;/div&gt;
&lt;/div&gt;


jQuery

var slidingPanel = $('#sliding-panel');
$(body).on('click', '[data-toggle="slidingPanel"]', function() {

    //if slider is already open
    if(slidingPanel.hasClass('open')){
        slidingPanel.hide("slide", { direction: "right" }, 500).removeClass('open');
        $('.buttonContent').hide();
        return;
    }
    //if slider is close, open slider
    slidingPanel.show("slide", { direction: "right" }, 500).addClass('open');
    //show content in slider based on button pressed
    $('#' + $(this).attr('id') + 'content').show();
});


Is this the best route. Is there a better way to abstract the code?
In the click event we will see right away from reading the if statement that you are performing a check to see if the slidingPanel is open by looking for a class of open on the element, so get rid of that first comment, you should also got rid of the //if slider is close, open slider  because that is also obvious from reading the code.  I am unsure of The final comment so I won't make a judgment on it.

Remove the return statement and make it into an if/else statement, because that is essentially what you are doing and it will read nicer.

This is what it turns into

var slidingPanel = $('#sliding-panel');
$(body).on('click', '[data-toggle="slidingPanel"]', function() {
    if(slidingPanel.hasClass('open')){
        slidingPanel.hide("slide", { direction: "right" }, 500).removeClass('open');
        $('.buttonContent').hide();
    } else {
        slidingPanel.show("slide", { direction: "right" }, 500).addClass('open');
        //show content in slider based on button pressed
        $('#' + $(this).attr('id') + 'content').show();
    }
});