asked on

Load a div on click - based on link ID

have this page here: http://cl.ly/2J170M3f340X3M2A1O1I - for now I am going to try to code a section where:

- On click of the left pane, it loads in a hidden div. I am thinking I can have it based on the ID of the <a> and the <div id="XX"> and keep it wired that way.

- I will have the same for all 4 tabs on the top. What would be the best way to load a hidden div on click onto that main content area?

Trying to develop this using jQuery.

- Click - grab ID
- Find a DIV with the same ID
- Grab HTML
- Insert in to DIV

Is there a faster way to do that?

Thanks.

colr__

- Click - grab ID
- Find a DIV with the same ID

The id attribute MUST be unique, so you cant grab an id and look for something with the same id - yiou'd be selectuing the same dom element.

To grab the html, use

$('...').html()

Open in new window

Once you have this, you can use the same function to insert it into the div. If the div has id="blah" and the clicked element has id="grabbed":

$('#blah').html($('#grabbed:first').html());

Open in new window

zappafan2k2

It's a bit difficult to be very helpful without seeing markup, only the screenshot. But I will try.

For one thing, you can't have two elements with the same id. When I've done something like this, I usually use an attribute in the <a> tag which matches the id of the corresponding <div>.
For instance,

<a href="#" rel="div_a" onClick="loadDiv(this);">Blah</a>
<a href="#" rel="div_b" onClick="loadDiv(this);">Blah</a>
...
<div id="content">...</div>
...
<div id="div_a" style="display: none;">description...</div>
<div id="div_b" style="display: none;">description...</div>

Open in new window

Then your jQuery might look something like this

function loadDiv(elem) {
	var myID = $(elem).attr('rel');
	$('#content').html($('#'+myID).html());
	}

Open in new window

There are hundreds of ways to accomplish what you want to do. This is just one way.

catonthecouchproductions

ASKER

As far as markup I would have that main content area repeated for X amount of products on the left and on click they will populate, going by ID.

Ryan

ASKER CERTIFIED SOLUTION

zappafan2k2

membership

Create a free account to see this answer

Signing up is free and takes 30 seconds. No credit card required.

See answer