JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div class="heading">
Heading Title 1
<div class="pull-right">
	<a href="#">Delete</a>
</div>
</div>

<div class="panel-group" id="accordion">
<h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
        <div class="delete">X</div>
        <input type="hidden" id="record_id_2" value="0"/>
    </a>
</h4>

<h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Group Item #3
        <div class="delete">X</div>
        <input type="hidden" id="record_id_3" value="0"/>
    </a>
    </h4>
</div>

<div class="heading">
Heading Title 1
<div class="pull-right">
	<a href="#">Delete</a>
</div>
</div>

<div class="panel-group" id="accordion">
<h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">
        Collapsible Group Item #2
        <div class="delete">X</div>
        <input type="hidden" id="record_id_2" value="0"/>
    </a>
</h4>

<h4 class="panel-title">
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">
        Collapsible Group Item #3
        <div class="delete">X</div>
        <input type="hidden" id="record_id_3" value="0"/>
    </a>
    </h4>
</div>

CSS

h4 { font-weight:normal; }
.red { border: 1px solid red; }

JavaScript

$('.pull-right a').click(function(e) {
    e.preventDefault();
    $(this).parents('.heading').next('.panel-group').find('.panel-title').each(function() {
        $('.delete', this).css('font-weight','bold');
        $('input', this).val(1);
    });
});

$('div.delete').click(function(e) {
    input = $(this).parent().find('input');
    value = (input.val() == 0) ? 1 : 0;
    weight = (input.val() == 0) ? 'bold' : 'normal';

    $(this).css('font-weight',weight);
    input.val(value);
});