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?