Question

HTML:

<div class="someclass" rel="first">text 1</div>
<div class="someclass" rel="second">text 2</div></div></div>
<div class="info_ly">here is some text</div>
<div class="first" > the first DIV </div>
<div class="second" > the second DIV </div>

CSS:

.first{ display:none}
.second{ display:none}

Jquery:

$(".someclass").click(function() {  
$(".info_ly").html($(this).attr('rel'));
});

I want to call and load the “rel” DIV inside “info_ly” DIV.

With this Jquery code I get only text “first” or “second” inside “info_ly” DIV.

How can I load the DIV with the class “first” or DIV with the class “second” inside “info_ly” DIV?

Answer 1

Like this:

$(".someclass").click(function() {  
  $(".info_ly").html($("." + $(this).attr('rel')).html());
});

You can view a demo here, if the other divs had IDs though, it gets a bit simpler, e.g. rel="#first", or making the clickable elements anchors with href="#first" would be even better.

---

Here’s an example of the alternative approach I mentioned using anchors:

<a class="someclass" href="#first">text 1</a>
<a class="someclass" href="#second">text 2</a>
<div class="info_ly">here is some text</div>
<div id="first" class="contentDiv"> the first DIV </div>
<div id="second" class="contentDiv"> the second DIV </div>​

And your jQuery narrows down to this:

$(".someclass").click(function() {
  $(".info_ly").html($(this.hash).html());
});​

This has the added benefit of degrading gracefully when JS isn’t enabled (as well as being bookmarkable if you add just a bit of code), you can see a demo of this approach here.