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.
- 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.
JavaScriptWeb Languages and Standards
Last Comment
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,
Then your jQuery might look something like this
There are hundreds of ways to accomplish what you want to do. This is just one way.
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>
Then your jQuery might look something like this
function loadDiv(elem) {
var myID = $(elem).attr('rel');
$('#content').html($('#'+myID).html());
}
There are hundreds of ways to accomplish what you want to do. This is just one way.
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
Ryan
ASKER CERTIFIED SOLUTION
THIS SOLUTION ONLY AVAILABLE TO MEMBERS.
View this solution by signing up for a free trial.
Members can start a 7-Day free trial and enjoy unlimited access to the platform.
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
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":Open in new window