JSFiddle - React, Tailwind, and code Playground

by Joe Saad

HTML

<div><a href="#">Expand All</a> | 
<a href="#">Collapse All</a>
</div>
<h5>heading</h5><span></span>
<p>urient? Arcu. Porttitor tristique! Proin? A nunc. Risus. Ac, dapibus. Montes tempor odio? Odio egestas, tempor, natoque, penatibus eu! Mus augue. Scelerisque lacus ut risus? Cras porttitor et turpis, sit mattis porttitor augue et sit ultricies adipiscing? Augue mid eu purus nascetur sed dignissim aliquam, lorem tristique pellentesque ac, facilisis arcu habitasse tristique sagittis nunc, scelerisque. Ac a, nascetur duis sociis? Pulvinar diam porttitor turpis? Ultricies in est, augue vel, elit diam e</p>
<h5>heading</h5><span></span>
<p>urient? Arcu. Porttitor tristique! Proin? A nunc. Risus. Ac, dapibus. Montes tempor odio? Odio egestas, tempor, natoque, penatibus eu! Mus augue. Scelerisque lacus ut risus? Cras porttitor et turpis, sit mattis porttitor augue et sit ultricies adipiscing? Augue mid eu purus nascetur sed dignissim aliquam, lorem tristique pellentesque ac, facilisis arcu habitasse tristique sagittis nunc, scelerisque. Ac a, nascetur duis sociis? Pulvinar diam porttitor turpis? Ultricies in est, augue vel, elit diam e</p>

CSS

div {float:left;}
h5{display:inline;font-weight:bold; border:1px solid blue; width:100px; clear:both; float:left;}
span{float:left;}
p {float:left; clear:left;}

JavaScript

$(function(){
   
    
    var searchWX = function(){
       if ($(this).next().next('p').is(':visible')) {
          // alert('visible');
           $(this).next('span').text(' downArrow');   
        }
        else {
          //  alert('not visible');
           $(this).next('span').text('  UpArrow');
        }

       $(this).next().next('p').slideToggle('fast');
    };
    
    
    $('h5').each(searchWX).click(searchWX);

   
    
    $('a').click(function(){

        if ($(this).text()=="Expand All"){
            $('p').slideDown();
            $('h5').next('span').text(' upArrow');   
        }
        else if ($(this).text()=="Collapse All"){
            $('p').slideUp();
            $('h5').next('span').text('  downArrow');

        }  
         
    });
    
     
});