Can not control div html content using jQuery?

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

Try changing this line in your else condition:

 $(this).html("header_content");

to:

 $(this).html(header_content);

Answer 2

$('.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.

Answer 3

this line is actually toggling your div to not visible which is why it goes away.

 if($(this).toggle()) {

what you want is to test if it is currently visible or not like this:

if($('#content_'+$(this).attr("value")).is(":visible")) {

Answer 4

line 6: if($(this).toggle()) do not make sense, $(this).toggle() return the this object itself. And it toggle the header div instead of the content div.

and $(this).html("header_content"); should not be a string in it.

And when toggle with "slow", the div state won't change right away, so it would be better check the content div status before calling the toggle.

Here is the updated script:

<script type="text/javascript">
       $('.tabheader').click(function() {
       var header_content = $(this).html();
       if($('#content_'+$(this).attr("value")).css("display")=='none')
       {
           header_content = header_content.replace("+","-");
           $(this).html(header_content);
       }
       else{
           header_content = header_content.replace("-","+");
           $(this).html(header_content);
       }

       $('#content_'+$(this).attr("value")).toggle("slow");
});
</script>