Question

Although I think that I did it before successfully, but this code does not work correctly this time.

The idea I need to perform is to check if tabheader div is showed, then replace (+) string with (-) and vice versa when div is tabheader div is hidden.

Here’s the HTML code:

<div>
    <div class="tabheader" value="1">
        <p> + sea food </p>
    </div>
    <div id="content_1" class="tabcontent">
        hi all 11111
    </div>
    <div class="tabheader" value="2">
        <p> + pizza </p>
    </div>
    <div id="content_2" class="tabcontent">
        hi all 222222
    </div>
    <div class="tabheader" value="3">
        <p> + sandwitches </p>
    </div>
    <div id="content_3" class="tabcontent">
        hi all 33333
    </div>
</div>

CSS code:

.tabcontent {
    display: none;
}
.tabheader {
    height: 24px;
    width: 80%;
    background-color: #B2BBD0;
    margin: 18px;
    direction: rtl;
    text-align: right;
}

javascript code

$('.tabheader').click(function() { 
    $('#content_'+$(this).attr("value")).toggle("slow"); 
    var header_content = $(this).html(); 
    if($(this).toggle()) {
        header_content = header_content.replace("+","-"); 
        $(this).html(header_content);  
    }
    else {
        header_content = header_content.replace(/\-/g,"+"); 
        $(this).html("header_content");  
    }
});

The problem that when I click on tabheader div, it disappears! Can anybody tell me where’s the problem?

Answer 1

$('.tabheader').click(function() { 
    var content = $('#content_'+$(this).attr("value"));
    var header_content = $(this).html(); 
    if(content.is(':visible')) {
        header_content = header_content.replace(/\-/g,"+");
        $(this).html(header_content);
    }
    else {
        header_content = header_content.replace("+","-");
        $(this).html(header_content);
    }
    $('#content_'+$(this).attr("value")).toggle("slow");
});

Check this fiddle: http://jsfiddle.net/wNsMs/1/

I believe this is what you were looking for.