Using Tabs with "+" and "-" in Tab Title

[macangelo]

Hi

I'm using "+" and "-" in front of the tab title ("+" when tab is closed to indicate it can be opened and there is more, and "-" when it's open to indicate it can be closed.

What works:
This works fine when click on a a tab and open it: plus changes to minus.
It works fine when I click on another tab: minus of first tab changes to plus, plus of second tab changes to minus.

What doesn't work:
What is not working is: when I click on tab that is open to close it, then minus is not changing to plus.

Here's my code from my cnt_part template:

Code: Select all

[TABCONTENT]
<div class="panel panel-default">
   <div class="panel-heading bg-img" role="tab" id="head{TABHEADLINE}">
     <h4 class="panel-title">
       <a data-toggle="collapse" class="tog" data-parent="#acc-{ID}" href="#{TABHEADLINE}" aria-controls="{TABHEADLINE}"><i class="fa fa-plus"></i><i class="fa fa-minus"></i>&nbsp;{TABTITLE}</a>
     </h4>
   </div>	
    
   <div id="{TABHEADLINE}" class="panel-collapse collapse" role="tabpanel" aria-labelledby="{TABHEADLINE}">
       <div class="space_20"></div>[TABTEXT]{TABTEXT}[/TABTEXT]
   </div>

   [TABLINK]<p class="more"><a href="{TABLINK}"{TARGET}>@@read more@@</a></p>[/TABLINK]
    <div class="clearfix"></div>
</div>
[/TABCONTENT]

Unfortunately I can't show the respective website because it's not supposed to be online yet.

Thank you for any help!

[macangelo]

Since the website is online now you can see my problem here (scroll down a bit and click on a header bar 2x)
http://curamedus.com/dehnungsstreifen.html

[Oliver Georgi]

Bit wrong handling, first not ideal to use both symbols by default and hide one on active. Easier with a single :before element and content:. Then you could also fix the problem with multiple lines.

Then your javascript doesn't remove the self active status. The following is untested:

Code: Select all

$(function() {
    var $panelHeading = $('.panel-heading');
    $panelHeading.find('a').on('touchstart click', function() {
        var $this = $(this);
        var $thisParent = $this.parents('.panel-heading');
        var $thisIsActive = $thisParent.hasClass('active');
        if($thisIsActive) {
            $thisParent.removeClass('active');
        } else {
            $panelHeading.removeClass('active');
            $thisParent.addClass('active');
        }
    });
});