Question

I’m looking for a plugin, preferably jQuery, that I can have the content hidden and then when you click one of the menu items it shows the content. However, the content doesn’t hide until a user clicks on the close button. This theme uses that effect:

http://themetrust.com/demos/reveal/

Eexcept it’s with the portfolio items instead of the menu items. I haven’t been able to find anything and I’m hoping someone can lead me in the right direction.

Answer 1

Simple example:

<div id="menu">
    <a href="first.html" rel="first">First</a>
    <a href="last.html" rel="last">Last</a>
</div>
<div id="first" class="content">
    First
    <input class="close" type="button" value="X"/>
</div>
<div id="last" class="content">
    Last
    <input class="close" type="button" value="X"/>
</div>

.content {
  display: none;
}

$(document).ready(function(){
    $('#menu a').click(function(){
        $('.content').hide();
        $('#'+this.rel+'').show();
        return false;
    });
    $('.content input.close').click(function(){
        $(this).parent().hide();
    });
});

http://jsfiddle.net/wm5Bh/