jquery show/hide div not working

Question

I'm trying to show and hide a div content using jquery and i have only a bit of understanding about jquery though i tend to learn fast. I'm trying to use both image and link to open the div and also swap the image from + to -. I've the image as one file containing both the + and - sign, and i'm able to split the image using CSS. The problem am having now is when i click on the plus sign or link nothing happens, it doesn't display the div. I have multiple divs. Here's what i've done so far.

<div class="topic">
<a href="#" class="article_toggle" onclick="article_toggle();" style="display: block; cursor: pointer;">bla bla bla</a>
        <div class="plusminus">
        <div class="plus" onclick="art_toggle();" style="display: block; cursor: pointer;">&nbsp;</div>
        <div class="minus" onclick="art_toggle();" style="display: none; cursor: pointer;">&nbsp;</div>
        </div>
</div>
<br />
<div class="section" style="display: none;">   // this is the div i want to show and hide.
    <table class="three-column">
    </table>
</div>

Ooops my bad, I forgot to add code to my script.

function article_toggle(show) {
var currentart = $(show + ' .article-arrow .article-plus').attr('style');
if(currentart.search('display: none;')==-1) {
    $(show + ' .article-arrow .article-minus').attr('style', 'display: none; cursor: pointer;');        
    $(show + ' .article-arrow .article-plus').attr('style', 'display: block; cursor: pointer;');        
    $(show + ' .faq-content .article-section').attr('style', 'display: none;');
    $(show).stop();
    $(show).css('backgroundColor', '#ffffff');
} else {
    $(show + ' .article-arrow .article-minus').attr('style', 'display: block; cursor: pointer;');       
    $(show + ' .article-arrow .article-plus').attr('style', 'display: none; cursor: pointer;');     
    $(show + ' .faq-content .article-section').attr('style', 'display: block;');
    $(show).css('backgroundColor', '#fff8de');
    $(show).css('backgroundColor', $(view).css('backgroundColor')).animate({
        backgroundColor: '#ffffff'
    }, 3000);
}

Answer 1

This is my suggestions

HTML:

<div class="topic">
    <a href="#" class="article_toggle" style="display: block; cursor: pointer;">bla bla bla</a>
    <div class="plusminus">
        <div class="plus article_toggle" style="display: block; cursor: pointer;">&nbsp;</div>
        <div class="minus article_toggle" style="display: none; cursor: pointer;">&nbsp;</div>
    </div>
</div>
<br />
<div class="section" id="section" style="display: none;">   // this is the div i want to show and hide.
    <table class="three-column">
    </table>
</div>

Javascript:

$(document).ready(function(){
    $('.article_toggle').click(function(){
        $('.section').toggle();
        $('.plusminus div').toggle();
    });
});

Notes:

• HTML and Javascript have been separated - all click events have been removed from HTML and registered with jQuery at page load
• The class article_toggle has been added to "plus" and "minus" images too, to allow jQuery to add click events on them too
• The $('.section').toggle(); code shows/hides the content
• The $('.plusminus div').toggle(); switches the visibility of the plus and minus buttons

Answer 2

Try this, even though you didn't include your script

$(document).ready(function(){

    $('.article_toggle').click(function(){

         $('.section').toggle();
     }
);​​​

JS Fiddle