JSFiddle - React, Tailwind, and code Playground

by mohammadAdil

HTML

<ul class="taxo2">
    <li class="">
        <div class="sacc-trigger active" style="width: 0px;">Photos</div>
        <div class="sacc-container" style="display: block; width: 0px;"></div>
    </li>
    <li class="">
        <div class="sacc-trigger" style="width: 0px;">Statements</div>
        <div class="sacc-container" style="display: none; width: 0px;"></div>
    </li>
    <li class="">
        <div class="sacc-trigger" style="width: 0px;">Powerpoint Presentations</div>
        <div class="sacc-container" style="display: none; width: 0px;"></div>
    </li>
    <li class="">
        <div class="sacc-trigger" style="width: 0px;">Videos/Interviews</div>
        <div class="sacc-container" style="display: none; width: 0px;"></div>
    </li>
</ul>

CSS

body {
    height:1000px;
}

JavaScript

var $container = $('.sacc-container'),
     $trigger = $('.sacc-trigger');

 $container.hide();
 $trigger.first().addClass('active').next().show();

 var fullWidth = $container.outerWidth(true);
 $trigger.css('width', fullWidth);
 $container.css('width', fullWidth);

 $trigger.on('click', function (e) {

     if ($(this).next().is(':hidden')) {
         alert('here2');
         $trigger.removeClass('active').next().slideUp(300);
         $(this).toggleClass('active').next().slideDown(300);
     }
     e.preventDefault();
 });

 // Resize
 $(window).on('resize', function () {
     fullWidth = $container.outerWidth(true)
     $trigger.css('width', $trigger.parent().width());
     $container.css('width', $container.parent().width());
 });