Databases
StackOverflow2013
Postsdbo
POIs there a more efficient way to toggle multiple classes on click than this?
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POIs there a more efficient way to toggle multiple classes on click than this?
    text
    copied!<p>What is a better way to implement this toggle class using JS?</p> <p>What this is doing is simply this:</p> <p>When you click either "Services", "Gallery", or "Customer", it removes the class "hidden" in the div below, and adds the class "hidden" to all other lists within the same div.</p> <p>A live demo of what is happening can be seen here: <a href="http://www.cyberbytesdesign.com/WIP2" rel="nofollow">http://www.cyberbytesdesign.com/WIP2</a> (it's the main header navigation).</p> <p>Here is the code that I am using (definitely not an efficient way as this is less than half of all the code, but gets the point across).</p> <pre><code>&lt;nav&gt; &lt;ul class="menu-option-set"&gt; &lt;li&gt; &lt;a href="javascript:;" onmouseup=" document.getElementById('services').classList.toggle('hidden'); document.getElementById('gallery').classList.add('hidden'); document.getElementById('customer').classList.add('hidden'); "&gt;Services&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;" onmouseup=" document.getElementById('gallery').classList.toggle('hidden'); document.getElementById('services').classList.add('hidden'); document.getElementById('customer').classList.add('hidden'); "&gt;Gallery&lt;/a&gt; &lt;/li&gt; &lt;li&gt; &lt;a href="javascript:;" onmouseup=" document.getElementById('gallery').classList.toggle('hidden'); document.getElementById('services').classList.add('hidden'); document.getElementById('customer').classList.add('hidden'); "&gt;Customer&lt;/a&gt; &lt;/li&gt; &lt;/ul&gt; &lt;/nav&gt; &lt;div id="header-subnav"&gt; &lt;nav&gt; &lt;ul id="services" class="hidden"&gt; &lt;li &lt;?php echo $bathroom ?&gt;&gt;&lt;a href="bathroom"&gt;Bathroom&lt;/a&gt;&lt;/li&gt; &lt;li &lt;?php echo $kitchen ?&gt;&gt;&lt;a href="index.php"&gt;Kitchen&lt;/a&gt;&lt;/li&gt; &lt;li &lt;?php echo $accessibility ?&gt;&gt;&lt;a href="index.php"&gt;Accessibility&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul id="gallery" class="hidden"&gt; &lt;li &lt;?php echo $photo ?&gt;&gt;&lt;a href="gallery.php"&gt;Photo Gallery&lt;/a&gt;&lt;/li&gt; &lt;li &lt;?php echo $project ?&gt;&gt;&lt;a href="project.php"&gt;Project Gallery&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;ul id="customer" class="hidden"&gt; &lt;li &lt;?php echo $coupons ?&gt;&gt;&lt;a href="coupons.php"&gt;Coupons&lt;/a&gt;&lt;/li&gt; &lt;li &lt;?php echo $testimonials ?&gt;&gt;&lt;a href="testimonials.php"&gt;Testimonials&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;nav&gt; &lt;/div&gt; </code></pre> <p>I'm assuming that you have to do something similar to using this somehow, but modified:</p> <pre><code>$('.menu-option-set a').click(function() { // if clicked item is selected then deselect it if ($('#header-subnav').hasClass('hidden')) { $('#header-subnav').removeClass('hidden'); } // otherwise deselect all and select just this one else { $('.menu-option-set a').removeClass('hidden'); $('#header-subnav').addClass('hidden'); } }); </code></pre> <p>Any ideas?</p>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload