Databases
StackOverflow2013
Postsdbo
POjQuery nav arrays, looking for an elegant solution
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POjQuery nav arrays, looking for an elegant solution
    text
    copied!<p>I've been trying to think of the most elegant way to achieve the following...</p> <p>I've got the following nav structure:</p> <pre><code> &lt;div class="menu-wrap"&gt; &lt;ul id="smenu"&gt; &lt;li&gt;&lt;a class="selected" href="#"&gt;1&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="" href="#"&gt;2&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="" href="#"&gt;3&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="" href="#"&gt;4&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="" href="#"&gt;5&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="" href="#"&gt;6&lt;/a&gt;&lt;/li&gt; &lt;li&gt;&lt;a class="" href="#"&gt;7&lt;/a&gt;&lt;/li&gt; &lt;/ul&gt; &lt;/div&gt; </code></pre> <p>And this div elsewhere on the page:</p> <pre><code> &lt;div class="desc-wrap"&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;p&gt;blah blah blah&lt;/p&gt; &lt;/div&gt; </code></pre> <p>the p's are all hidden by default; if I click the first li, I want the first p to show up, etc. Simple right? I've got it working several different ways, but I keep thinking I should be able to do it in far fewer lines.</p> <p>Here's my super lame one, with class names added:</p> <pre><code> $("#smenu li").click(function() { $(".desc-wrap p").hide(); }); $("li.desc-one").click(function() { $("p.desc-one").show(); }); $("li.desc-two").click(function() { $("p.desc-two").show(); }); $("li.desc-three").click(function() { $("p.desc-three").show(); }); $("li.desc-four").click(function() { $("p.desc-four").show(); }); $("li.desc-five").click(function() { $("p.desc-five").show(); }); $("li.desc-six").click(function() { $("p.desc-six").show(); }); $("li.desc-seven").click(function() { $("p.desc-seven").show(); }); </code></pre> <p>And here's the start of my array attempt, but you can see where that's going:</p> <pre><code> var mappedPs = $(".desc-wrap p").map(function (index) { if (index == 0) { $(this).show(); } else { $(this).hide(); } }); var mappedList = $("#smenu li").map(function (index) { if (index == 0) { $("#smenu li").click(function() { $(mappedPs[0]).show(); }); } else { $(mappedPs[1,2,3,4,5,6]).hide(); } }); </code></pre> <p>Am I missing something obvious? I feel like this should be far simpler than it's turning out...</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