JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<h3 class="box-header">Step 1</h3>

<i class="fa fa-caret-down help-toggle" data-toggle="tooltip" title="Click for help"></i>

<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p class="help-text" style="display:none;">This is help for Step 1</p>
        </div>
    </div>
</div>

<h3 class="box-header">Step 2</h3>

<i class="fa fa-caret-down help-toggle" data-toggle="tooltip" title="Click for help"></i>

<div class="box-body">
    <div class="row">
        <div class="col-md-12">
            <p class="help-text" style="display:none;">This is help for Step 2</p>
        </div>
    </div>
</div>

CSS

i {
    width:10px;
    height:10px;
    border:1px solid #999;
    display:inline-block;
}

JavaScript

$('.help-toggle').click(function () {
    $(this).toggleClass('fa-caret-up fa-caret-down');
    $(this).next('div.box-body').find('.help-text').slideToggle("fast");
});