JSFiddle - React, Tailwind, and code Playground

by cfarm

HTML

<div id="nutritionalInfo">
<h2 id="header_0">Breads</h2> 
<div class="nutriCol"> 
<ul class="list_h2"> 
</ul> 
<h3 id="header_1">Bagels</h3> 
<ul class="list_h3"> 
<li class="searchus" id="item_2"><a href="nutrition-pdfs-2011/breads/bagels/bagel_blueberry__veg.pdf" title="Bagel Blueberry" class="nutripdf">Bagel Blueberry</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_3"><a href="nutrition-pdfs-2011/breads/bagels/bagel_chocolate_chip__veg.pdf" title="Bagel Chocolate Chip" class="nutripdf">Bagel Chocolate Chip</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_4"><a href="nutrition-pdfs-2011/breads/bagels/bagel_cinnamon_raisin__veg.pdf" title="Bagel Cinnamon Raisin" class="nutripdf">Bagel Cinnamon Raisin</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_5"><a href="nutrition-pdfs-2011/breads/bagels/bagel_egg__veg.pdf" title="Bagel Egg" class="nutripdf">Bagel Egg</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_6"><a href="nutrition-pdfs-2011/breads/bagels/bagel_everything__veg.pdf" title="Bagel Everything" class="nutripdf">Bagel Everything</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_7"><a href="nutrition-pdfs-2011/breads/bagels/bagel_garlic__veg.pdf" title="Bagel Garlic" class="nutripdf">Bagel Garlic</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_8"><a href="nutrition-pdfs-2011/breads/bagels/bagel_jalapeno__veg.pdf" title="Bagel Jalapeno" class="nutripdf">Bagel Jalapeno</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_9"><a href="nutrition-pdfs-2011/breads/bagels/bagel_marble__veg.pdf" title="Bagel Marble" class="nutripdf">Bagel Marble</a><span class="diet_vegetarian">Vegetarian</span></li> 
<li class="searchus" id="item_10"><a href="nutrition-pdfs-2011/breads/bagels/bagel_onion__veg.pdf"...

CSS

.accessibly-hidden {
    position: absolute; left: -999em;
}
#nutritionalInfo h2 {display:block;clear:both;background:yellow;font-size:110%;}
#nutritionalInfo h2:before {content:"+ ";}
#nutritionalInfo h2:hover {cursor:pointer;cursor:hand;}

.test {font-weight:bold;}

JavaScript

var $menuHeading = $('#nutritionalInfo h2'),
        $nutriCol = $('.nutriCol');
    
    $nutriCol.addClass('accessibly-hidden'); 
    $menuHeading.click(function () {
        $nutriCol.toggleClass('accessibly-hidden').addClass('test');
        });