A simple show/hide jQuery script targeting elements using the data attributes, rather than using id or classes to find an element or control visibility.

jsFiddle Demo

How it works?

  1. Hides all panel elements when the function is invoked. This makes the function degrade if there is no jQuery loaded the panels will still appear.
  2. Match up the trigger’s data attribute with element with the content you want to show

HTML Markup

<a class="trigger" data-panel="panel1" href="#">Panel 1</a>
<a class="trigger" data-panel="panel2" href="#">Panel 2</a>

<div class="panel" data-panel="panel1">
     <p>Panel 1 Content</p>
</div>

<div class="panel" data-panel="panel2">
     <p>Panel 2 Content</p>
</div>

jQuery Script

function targetPanel()
{
    $(".panel").hide();

    $(".trigger").on("click", function()
    {
        var clickedElem = $(this),
            panelRef = clickedElem.data("panel"),
            panelToShow = $('.panel[data-panel='+panelRef+']');

        $(".panel").hide();
        panelToShow.toggle();
    });
}

$(function() {
     targetPanel();
});

Demo

Feel free to check out the jsFiddle demo, please fork and use:

jsFiddle Demo