Displays DIV whose ID equals the ID of the clicked SPAN

[soltek]

Here I am once again, guys =)

 

First, my markup:

 

<div class="items_list">
        <span ID="1">Item</span>
        <span ID="2">Item</span>
        <span ID="3">Item</span>
</div>
<div class="content_list">
        <div id="1">Content</div>
        <div id="2">Content</div>
        <div id="3">Content</div>
</div>

So, all the divs inside .contant_list are hidden using css, what I'm trying to do is to make them visible, once the correspondent span is clicked.
For example, you click on the second span, with ID=1, and the div with the same ID would become visible.

Can you help me do that?
If this method isn't... suitable, you can suggest me another ones.


Thanks!

[smerny]

Take a look at these:

 

http://api.jquery.com/hide/

 

http://api.jquery.com/show/

[MarPlo]

Hi,

Normally, the ID should be unique, so, no 2 elements with same ID. You must think to other solution.

Here's an example:

<div class="items_list">
  <span ID="s1" title="d1" onclick="showDiv(this.title)">Item</span>
  <span ID="s2" title="d2" onclick="showDiv(this.title)">Item</span>
  <span ID="s3" title="d3" onclick="showDiv(this.title)">Item</span>
</div>
<div id="content_list">
  <div id="d1">Content1</div>
  <div id="d2">Content2</div>
  <div id="d3">Content3</div>
</div>

<script type="text/javascript"><!--
// JS tabs, by www.coursesweb.net
function showDiv(id) {
  var divs = document.getElementById('content_list').getElementsByTagName('div');
  for(var i=0; i<divs.length; i++) divs[i].style.display = 'none';
  document.getElementById(id).style.display = 'block';
}
--></script>

[soltek]

Oops, I forgot to say I'd like to do it using Jquery.

 

I kinda know how to use the 'hide' and 'show', but I've no idea about how to display automatically the correspondent element.

[MarPlo]

Here's with jQuery:

<div class="items_list">
  <span ID="s1" title="d1">Item</span>
  <span ID="s2" title="d2">Item</span>
  <span ID="s3" title="d3">Item</span>
</div>
<div id="content_list">
  <div id="d1">Content1</div>
  <div id="d2">Content2</div>
  <div id="d3">Content3</div>
</div>

<script type="text/javascript"><!--
// JS tabs, by www.coursesweb.net
$(document).ready(function() {
  $('.items_list span').click(function(){
    $('#content_list div').hide();
    $('#'+this.title).show('slow');
  });
});
--></script>

[soltek]

Thanks a lot =)

 

Would you please tell me you share a link about what does the '+' sign stands for on this line?

$('#'+this.title).show('slow');

[smerny]

string concatenation.

 

this.title could be "d1" for the "s1" span...

 

so

 

"#"+this.title

 

would be

 

"#d1"

 

if "this" is the "s1" element.