JSFiddle - React, Tailwind, and code Playground

by Venkatesh Dematti

HTML

<div id="Art_industries">
  
<ul>
    <li><a href="/industry/automotive-and-tire">Automotive and Tire</a></li>

    <li><a href="/industry/banking-financial-services-insurance"><span>Banking, Financial Services and Insurance</span></a></li>

    <li><a href="/industry/biotechnology-pharmaceutical-life-sciences"><span>Biotechnology, Pharmaceutical and Life Sciences</span></a></li>

    <li><a href="/industry/chemicals"><span>Chemicals</span></a></li>

</ul>


<ul class="complete">
    <li><a href="/industry/energy"><span>Energy</span></a></li>

    <li><a href="/industry/food-and-beverage"><span>Food and Beverage</span></a></li>

    <li><a href="/industry/ict-media-entertainment"><span>ICT, Media and Entertainment</span></a></li>

    <li><a href="/industry/industrial-and-manufacturing"><span>Industrial and Manufacturing</span></a></li>

    <li><a href="/industry/mining-and-materials">Mining, Metals and Minerals</a></li>

    <li><a href="/industry/retail-and-cpg"><span>Retail and CPG</span></a></li>

    <li><a href="/industry/transportation"><span>Transportation</span></a></li>
</ul>

<p class="more">Show More</p>

</div>




<br/>

<div id="Art_Services">
  
<ul>
        <li><a href="/service/category-market-intelligence"><span>Category Market Intelligence</span></a></li>

        <li><a href="/service/supply-market-analysis"><span>Supply Market Analysis</span></a></li>

        <li><a href="/service/low-cost-country-sourcing-best-cost-country-sourcing"><span>Low-Cost Country Sourcing/Best-Cost Country Sourcing</span></a></li>

        <li><a href="/service/benchmarking"><span>Benchmarking</span></a></li>

        

</ul>


<ul class="complete">
  <li><a href="/service/spend-analysis"><span>Spend Analysis</span></a></li>

        <li><a href="/service/cost-modeling-and-should-cost-analysis/"><span>Cost Modeling/Should Cost Analysis</span></a></li>

        <li><a href="/service/tco-analysis"><span>Total Cost of Ownership (TCO) Analysis</span></a></li>

      ...

CSS

#Art_industries .complete,
#Art_Services .complete{
    display:none;
    
}
#Art_industries li,
#Art_Services li{list-style-type:none;}

.more{
    background:lightblue;
    color:navy;
    font-size:13px;
    padding:3px;
    cursor:pointer;
}

JavaScript

// Article page
jQuery(document).ready(function(){
	jQuery('#Art_industries .complete,#Art_Services .complete').css("display","none");
	
    jQuery('#Art_industries .more').click(function(){
    if ($('#Art_industries .complete').css("display") == "none") {
        // handle non visible state
        $(this).text('Show Less');
        jQuery('#Art_industries .complete').slideDown();
         
    } else {
        // handle visible state
        $(this).text('Show More');
        jQuery('#Art_industries .complete').slideUp();
    }
       
    });
    
    
    //Services
    jQuery('#Art_Services .more').click(function(){
    if ($('#Art_Services .complete').css("display") == "none") {
        // handle non visible state
        $(this).text('Show Less');
        jQuery('#Art_Services .complete').slideDown();
         
    } else {
        // handle visible state
        $(this).text('Show More');
        jQuery('#Art_Services .complete').slideUp();
    }
       
    });
    
});
// Article Page