SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Enthusiast
    Join Date
    Feb 2010
    Posts
    77
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    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>
    
    
    
    
    <div class="buttons">
        <a  class="showSingle" data-target="1">Option 1</a>
        <a  class="showSingle" data-target="2">Option 2</a>
        <a  class="showSingle" data-target="3">Option 3</a>
        <a  class="showSingle" data-target="4">Option 4</a>
        <a  class="showSingle" data-target="5">Option 5</a>
        <a  class="showSingle" data-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. #2
    Community Advisor bronze trophy
    fretburner's Avatar
    Join Date
    Apr 2013
    Location
    Brazil
    Posts
    1,446
    Mentioned
    45 Post(s)
    Tagged
    13 Thread(s)
    Hi flashead,

    Here's one way to do it:

    HTML Code:
    <!DOCTYPE html>
    <html>
      <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.10.1.min.js"></script>
        <style type='text/css'>
            .buttons .selected {
                color: red;
            }
        </style>
      </head>
      <body>
          <div id="main">
          
            <div class="newsSet">
                <div class="buttons">
                    <a class="showSingle" data-target="1">Option 1</a>
                    <a class="showSingle" data-target="2">Option 2</a>
                    <a class="showSingle" data-target="3">Option 3</a>
                    <a class="showSingle" data-target="4">Option 4</a>
                    <a class="showSingle" data-target="5">Option 5</a>
                    <a class="showSingle" data-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>
            </div>
            
            <br /><br /><br /><br />
            
            <div class="newsSet">
                <div class="buttons">
                    <a class="showSingle" data-target="1">Option 1</a>
                    <a class="showSingle" data-target="2">Option 2</a>
                    <a class="showSingle" data-target="3">Option 3</a>
                    <a class="showSingle" data-target="4">Option 4</a>
                    <a class="showSingle" data-target="5">Option 5</a>
                    <a class="showSingle" data-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>
            </div>
    
          </div>
          <script type="text/javascript">
            $('.newsSet').each(function(index, element){
                var $set = $(this);
                $set.find('.showSingle').on('click', function () {
                    $(this).addClass('selected').siblings().removeClass('selected');
                    $set.find('.targetDiv').hide();
                    $set.find('#div' + $(this).data('target')).show();
                });
                $set.find('.showSingle').first().click();
            });
          </script>
      </body>
    </html>
    I've just wrapped each set of news items in a container div with the class 'newsSet'. In the JS you can then grab all the news containers on the page, and loop through them to set up the click handlers.


Tags for this Thread

Bookmarks

Posting Permissions

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