HTML:
<ul id='list'>
<li id='name1-link'> link </li>
<li id='name2-link'> link </li>
<li id='name3-link'> link </li>
<li id='name4-link'> link </li>
</ul>
<div id='wrap'>
<div id='name1'> text here </div>
<div id='name2'> text here </div>
<div id='name3'> text here </div>
<div id='name4'> text here </div>
</div>
CSS:
#wrap li {display:none;}
Javascript Goal:
When a link is clicked, it's corresponding div is shown. All divs are
hidden by default via CSS.
Something like this:
$('#wrap li').click(function () {
//reference the li that was clicked and grab its ID
//strip out the " -link " part of the id
//show the div that matches this new ID
});
Current Javscript:
$('#wrap li').click(function () {
var liName = this.attr('id');
$('.'+liName+-'link').fadeIn();
});
As you can see I'm a JavaScript amateur. If truncating/manipulating
the ID of the link is too difficult, I can switch the ID name formats
- making it so that I would need to ADD the '-link' part, which may be
easier than removing? My core questions are how I would:
-select/reference the li that was clicked, and not the whole array
-maniuplate the ID of the id that was clicked (and store in a
variable?)
-use the manipulated ID to show the corresponding div (easiest part)
Thank you.
