3
\$\begingroup\$

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:

enter image description here

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:

<div>
    <button id="p1" data-toggle="slidingPanel"></button>
    <button id="p2" data-toggle="slidingPanel"></button>
    <button id="p3" data-toggle="slidingPanel"></button>
    <button id="p4" data-toggle="slidingPanel"></button>
    <button id="p5" data-toggle="slidingPanel"></button>
</div>

Sliding Panel and content divs

<div class="slidingPanel">
    <div class="buttonContent" id="p1content"></div>
    <div class="buttonContent" id="p2content"></div>
    <div class="buttonContent" id="p3content"></div>
    <div class="buttonContent" id="p4content"></div>
    <div class="buttonContent" id="p5content"></div>
</div>

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?

\$\endgroup\$
  • 1
    \$\begingroup\$ This is not working code: it contains meta-code (...hide..., ...show...) and uses variables without sense in the showed context (slidingPanel, test). Should be put on hold, IMO. \$\endgroup\$ – cFreed Apr 1 '16 at 12:03
  • 1
    \$\begingroup\$ @cFreed thank you i've removed the meta code and the nonsense variables. \$\endgroup\$ – inspired Apr 1 '16 at 12:56
  • \$\begingroup\$ That's better, and may be working code now, but still not clear: especially where is the element whose id="sliding-panel"? Looking at the image you posted, it might be the top element, while looking at the JS code suggests it'd rather be the 2nd <div>, which would be misspelled with class="slidingPanel". In addition the HTML code doesn't reflect the expected result showed by the image. You'd better to include a snippet in your question, with the needed updates: then we'd be able to clearly know what you're expecting. \$\endgroup\$ – cFreed Apr 1 '16 at 18:34
1
\$\begingroup\$

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();
    }
});
\$\endgroup\$

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.