Ok going the other way... an "optimized" take on the question. Running example: Edit fiddle - JSFiddle JavaScript: init=function(){ $('[buttonlist] button').click(function(){ // bind to button clicks var pressed = $(this).html().toLowerCase().replace(/\s/g, ''); // what was pressed? $( '.readingContent div' ).hide(); // hide all elements again $( '.readingContent, div[data=' + pressed + ']' ).show(); // show the main element (again) and the element pressed }) }; $(document).ready(function(){ init(); }); CSS: .readingContent, .readingContent div{ /* hide all entire block and the elements initially */ display: none; } HTML: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> <section class="fullLength"> <nav class="subjectBar"> <ul buttonlist> <button>Reading</button> <button>Math</button> <button>Science</button> <button>English</button> <button>Homework</button> <button>Study Skills</button> <button>Summer Camps</button> </ul> </nav> </section> <section class="readingContent"> <div data="reading"> <h1>Reading</h1> <p></p> </div> <div data="math"> <h1>Math</h1> <p></p> </div> <div data="science"> <h1>Science</h1> <p></p> </div> <div data="english"> <h1>English</h1> <p></p> </div> <div data="homework"> <h1>Homework</h1> <p></p> </div> <div data="studyskills"> <h1>Study Skills</h1> <p></p> </div> <div data="summercamps"> <h1>Summer Camps</h1> <p></p> </div> </section> You don't need to complicate HTML code with classes, just use attributes and child html elements to refer to them. You can bind JavaScript events the same was CSS is applied to large sections of code.
... View more