Show/Hide Function with Multiple Div IDs

Question

So I know close to nothing about jQuery - but I swear I'm trying to learn. The thing is, I've got some code that works - but I know it's repetitive and probably not kosher for a real programmer - which is why I've turned to you all.

So what I want to do is show/hide (or toggle - whatever you think is best) some informational divs, or so you might call them, on this page: Click for some pretty darn bad jQuery coding

Anyway, the show/hide code that I have right now stands at this:

    $(document).ready(function(){

    $('#meet_growlab, #buddy_tv').hide();

    $('a#growlab').click(function(){
    $('#meet_growlab').show('slow');
});

    $('a#growlab_close').click(function(){
    $('#meet_growlab').hide('slow');
})

    $('a#buddytv').click(function(){
    $('#buddy_tv').show('slow');
});

    $('a#buddytv_close').click(function(){
    $('#buddy_tv').hide('slow');
})


});

With the HTML being (well the gist of it being...):

<div id="meet_growlab">BLAH BLAH BLAH
<p><a href="#" id="growlab_close">Close</a></p>
</div>

<div id="buddy_tv">BLAH BLAH BLAH
<p><a href="#" id="buddytv_close">Close</a></p>
</div>

<ul>
    <li><a href="#" id="growlab" rel="#meet_growlab">Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)</a></li>
    <li><a href="#" id="buddytv" rel="#buddy_tv">Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)</a></li>
</ul>

So yeah - it works, but it's not pretty. And I know you guys can help me make it pretty, so...will you?

Answer 1

You could make it so that your content slides up and down using the slideToggle function, as well as using the "close" button provided. This is what it would look like:

HTML

<div id="meet_growlab" class="content">BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<div id="buddy_tv" class="content">BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<ul>
    <li><a href="#" class="open" rel="#meet_growlab">
        Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver (June 24, 2011)
    </a></li>
    <li><a href="#" class="open" rel="#buddy_tv">
        Building the Web's Best Entertainment-Based Community Site: Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)
    </a></li>
</ul>

jQuery

$('.content').hide();

$('.open').click(function(){
    var section = $(this).attr('rel');
    $(section).slideToggle();
});

$('.close').click(function(){
    $(this).parents('.content').slideUp();
});

See the example here: http://jsfiddle.net/pXh37/

This way, you can add additional sections of content later without changing any of the jQuery code. There's a pretty good post about it here:

http://www.ben-holland.co.uk/blog/coding/keeping-things-simple-and-generic-in-jquery/

Answer 2

You can use rel attribute as link to the div. Close functionality can be write easier, see the example: http://jsfiddle.net/mikhailov/Ra4Ad/

JS

$('#growlab, #buddytv').click(function() {
    var obj = $(this).attr('rel');
    $(obj).show('slow');
    return false
});

$('.close').click(function() {
    $(this).parents('div').hide('slow')
    return false
})

HTML

<div id="meet_growlab">
    BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<div id="buddy_tv">
    BLAH BLAH BLAH
    <p><a href="#" class="close">Close</a></p>
</div>

<ul>
    <li>
        <a href="#" id="growlab" rel="#meet_growlab">
            Meet GrowLab - Canada’s Y-Combinator Arrives in Vancouver 
            (June 24, 2011)
        </a>
    </li>
    <li>
        <a href="#" id="buddytv" rel="#buddy_tv">
            Building the Web's Best Entertainment-Based Community Site: 
            Andy Liu, CEO and Founder of BuddyTV (April 1, 2011)
        </a>
    </li>
</ul>