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,676
    Thanks
    6
    Thanked 1,008 Times in 981 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,047
    Thanks
    0
    Thanked 251 Times in 247 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/


  •  

    Posting Permissions

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