Other section tabs

Below is example of other section steps code.

image

<!-- Other section -->
<section class="other-section other-section-2">
    <div class="container">
        <div id="step1-1" class="tab-pn">
            <h2 class="title">Step 1 : Title...</h2>
            <p class="title-sub">
                ... DESCRIPTION TEXT ...
            </p>
        </div>
 
        <div id="step1-2" class="tab-pn">
            <h2 class="title">Step 1 : Title...</h2>
            <p class="title-sub">
                ... DESCRIPTION TEXT ...
            </p>
        </div>
 
        <div id="step1-3" class="tab-pn">
            ...
        </div>
         
        <hr class="mr-tb-50">
         
        <ul class="tab-widget">
            <li><a href="#" data-tb="#step1-1" class="active"><i>1</i></a></li>
            <li><hr></li>
            <li><a href="#" data-tb="#step1-2"><i>2</i></a></li>
            <li><hr></li>
            <li><a href="#" data-tb="#step1-3"><i>3</i></a></li>
        </ul>
 
    </div><!-- /.container -->
</section><!-- /.other-section -->
  • Apply ID on all tab-pn as display in line no.4, 11 and 18
  • Than use all ID in data-tb=”#step1-1″ attribute for each tabs as display on line no.25, 27 and 29
  • Add TITLE and DESCRIPTION text as display on above code example line no.5 and 7

 

Related Articles