Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Oct 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Need help having two Javascript news filters on same page

    Hi guys,

    I'm using the below code to create a news filter for my site and it all works fine.

    However, I want to have two separate news filters on the same page.

    Can anyone tell me how I could go about either editing the Javascript or adding a separate code for another set.

    Thank you very much and I hope to hear from you.

    SM

    Code:
    <script type='text/javascript' src='http://code.jquery.com/jquery-1.8.3.js'></script>
      
    <style type='text/css'>
        .buttons .selected {
        color: red;
    }
    
    </style>
      
    
    
    <script type='text/javascript'>//<![CDATA[ 
    $(window).load(function(){
    $('.showSingle').on('click', function () {
        $(this).addClass('selected').siblings().removeClass('selected');
        $('.targetDiv').hide();
        $('#div' + $(this).data('target')).show();
    });
    $('.showSingle').first().click();
    
    });//]]>  
    
    </script>
    
    
    <!-- FIRST NEWS FILTER -->
    
    <div class="buttons">
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="1">Option 1</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="2">Option 2</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="3">Option 3</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="4">Option 4</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="5">Option 5</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="6">Option 6</a>
    </div>
    
    <div id="div1" class="targetDiv">Lorum Ipsum 1</div>
    <div id="div2" class="targetDiv">Lorum Ipsum 2</div>
    <div id="div3" class="targetDiv">Lorum Ipsum 3</div>
    <div id="div4" class="targetDiv">Lorum Ipsum 4</div>
    <div id="div5" class="targetDiv">Lorum Ipsum 5</div>
    <div id="div6" class="targetDiv">Lorum Ipsum 6</div>
    
    
    
    
    
    
    <!-- SECOND NEWS FILTER -->
    
    <div class="buttons">
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="1">Option 1</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="2">Option 2</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="3">Option 3</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="4">Option 4</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="5">Option 5</a>
        <a  class="showSingle" data-rel="nofollow" rel="nofollow" target="6">Option 6</a>
    </div>
    
    <div id="div1" class="targetDiv">Lorum Ipsum 1</div>
    <div id="div2" class="targetDiv">Lorum Ipsum 2</div>
    <div id="div3" class="targetDiv">Lorum Ipsum 3</div>
    <div id="div4" class="targetDiv">Lorum Ipsum 4</div>
    <div id="div5" class="targetDiv">Lorum Ipsum 5</div>
    <div id="div6" class="targetDiv">Lorum Ipsum 6</div>

  • #2
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,700
    Thanks
    6
    Thanked 1,011 Times in 984 Posts
    It looks like this should work already. You just can’t have the same ID more than once in a document; you need to change all the IDs in the second set so they are unique.

  • #3
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,068
    Thanks
    0
    Thanked 256 Times in 252 Posts
    Aside from that, all targetDivs will be hidden because of $('.targetDiv').hide(); Only the associated targetDivs need to be hidden.

    This can be solved without associating the divs via target attribute but by simply associating the anchor link index with the index of the target div. See this jsfiddle for demo.

    http://jsfiddle.net/zHDwg/
    Glenn
    ____________________________________

    My Blog
    Tower of Hanoi Android app (FREE!)
    Tower of Hanoi Leaderboard
    Samegame Facebook App
    vBulletin Plugins
    ____________________________________


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •