Need help having two Javascript news filters on same page

JavaScript
1

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 :slight_smile:

<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

Hi flashead,

Here’s one way to do it:


<!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.

3