Need help having two Javascript news filters on same page

programming web dev
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>