CODEWITHSUNDEEP
javascriptjqueryhtml
Steve
Steve

Reputation: 8293

Show / Hide UL based on link clicked

I would like to show / hide UL's based on what link is clicked, not sure if this is the best way?

JS Fiddle: http://jsfiddle.net/zangief007/rj8g0yh4/1/

HTML:

<ul class="category-1 group">
    <li class="name">JOHN Smithe QC</li>
    <li class="call">DDI <span>09 333 4545</span></li>
    <li  class="call">MOB  <span>027 545 6987</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
    <ul class="category-3 group">
    <li class="name">Barry White</li>
    <li class="call">DDI <span>021 487 5896</span></li>
    <li  class="call">MOB  <span>024 787 9854</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-2 group">
    <li class="name">Peter Pan</li>
    <li class="call">DDI <span>231234</span></li>
    <li  class="call">MOB  <span>234234</span></li>
    <li><a href="mailto:23423423423">23423423423</a></li>
</ul>

JS:

$(document).ready(function () {
               $(function() {
                   var curPage="";
                $("#selectMe-desk li a").click(function() {
                    if (curPage.length) { 
                $("#"+curPage).hide();
                }
                curPage=$(this).data("category-");
                $(""+curPage).show();
                    });
                });
            });

Upvotes: 1

Views: 196

Answers (1)

hlfcoding
hlfcoding

Reputation: 2542

You had several errors in both your JS and HTML. I also simplified bits of your code. Here is the fixed version: http://jsfiddle.net/rj8g0yh4/2/

HTML:

<ul class="filter-desk" id="selectMe-desk">
  <li class="category-1"><a class="active" href="#" data-page="category-1">Partners</a></li>
  <li class="category-2"><a class="" href="#" data-page="category-2">Consultants</a></li>
  <li class="category-7"><a class="" href="#" data-page="category-7">Senior Associates</a></li>
  <li class="category-8"><a class="" href="#" data-page="category-8">Associates</a></li>
  <li class="category-9"><a class="" href="#" data-page="category-9">Solicitors</a></li>
  <li class="category-10"><a class="" href="#" data-page="category-10">Management</a></li>
  <li class="category-3"><a class="" href="#" data-page="category-3">PA's</a></li>
</ul>

<ul class="category-1 group">    
    <li class="name">JOHN Smithe QC</li>
    <li class="call">DDI <span>09 333 4545</span></li>
    <li class="call">MOB <span>027 545 6987</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-3 group">
    <li class="name">Barry White</li>
    <li class="call">DDI <span>021 487 5896</span></li>
    <li class="call">MOB <span>024 787 9854</span></li>
    <li><a href="mailto:[email protected]">[email protected]</a></li>
</ul>
<ul class="category-2 group">
    <li class="name">Peter Pan</li>
    <li class="call">DDI <span>231234</span></li>
    <li class="call">MOB <span>234234</span></li>
    <li><a href="mailto:23423423423">23423423423</a></li>
</ul>

JS:

$(function() {
    $('.group').hide();
    $('.category-1').show();
    $("#selectMe-desk li a").click(function() {
        var $a = $(this);
        $(".group").hide().filter("."+$a.data("page")).show();
    });
});

Upvotes: 2

Related Questions