Question

I want to create a list with incremented ids and hrefs using jQuery. Is this possible?

<ul id="links">
  <li><a href="#item1">Item number 1</a></li>
  <li><a href="#item2">Item number 2</a></li>
  <li><a href="#item3">Item number 3</a></li>
  <li><a href="#item4">Item number 4</a></li>
  <li><a href="#item5">Item number 5</a></li>
</ul>

<div id="toShow">
    <div id="item1" style="display:block;"></div>
    <div id="item2" style="display:none;"></div>
    <div id="item3" style="display:none;"></div>
    <div id="item4" style="display:none;"></div>
    <div id="item5" style="display:none;"></div>
</div>

These list items will be generated via a loop and I want to use this plugin http://www.bijusubhash.com/demo/show-hide-a-div-at-a-time-with-jquery/

Thanks,
David

Answer 1

I can assume that: What you need actually is much more simpler than you think:

demo link

HTML: (yes, NO custom ID’s mess)

<ul id="links">
  <li><a href="#">Item 1</a></li>
  <li><a href="#">Item 2</a></li>
  <li><a href="#">Item 3</a></li>
  <li><a href="#">Item 4</a></li>
  <li><a href="#">Item 5</a></li>
</ul>

<div id="toShow">
    <div>First element</div>
    <div>Second element</div>
    <div>Third element</div>
    <div>Fourth element</div>
    <div>Fifth element</div>
</div>

And a couple of jQuery lines:

$('#toShow>div:gt(0)').hide(); // hide all but first
$('#links li').on('click',function(e){
    $('#toShow>div:eq('+$(this).index()+')').show(1700).siblings('div').stop(1).hide(1700);
    return false;
});

More info:
http://api.jquery.com/