The links you click to display the related content also need sequential IDs: id="link1", id="link2", etc. for example. Expand the logic used to hide/display the related content to set/reset the color style of the link# elements.
First set all link# elements to gray, then set the clicked link ID to black. You may want to alter the passed ID to be just the number portion, as in onclick="OpenDiv('2')" . Then it can be concatenated to either ‘div’ or ‘link’ to determine the element ID of interest.
Thank you for your response, bcworkz. I’m not too familiar with javascript some I’m not sure where/how to add the second IDs for the links. Any suggestions on this? I picked up the previous function from another forum page.
Probably where ever you added the onclick attributes. You want a link to look like this: <a id="link1" style="cursor: pointer;" onclick="OpenDiv('1');" >Investment Team</a>
Hmm, I’m still not able to get it to work. This is what is currently on the page ( I forgot to add backticks to my original post so it didn’t show the full code)
<script type=”text/javascript”>// <![CDATA[
function OpenDiv(id){
for (i=1;i<=100;i++) { /* so you can add up to 100 options on each page */ var divname = ‘div’+i; var divStyle = document.getElementById(divname).style; document.getElementById(divname).style.color = “black”; divStyle.display=(id==divname)?’block’:’none’; } return false; }
// ]]></script>
<h2 style="text-align: center;"><a style="cursor: pointer;"onclick="OpenDiv('div1')";>Investment Team</a>
<a style="cursor: pointer;"onclick="OpenDiv('div2')">Advisors</a>
<a style="cursor: pointer;"onclick="OpenDiv('div3')">Management Team</a>
<a style="cursor: pointer;"onclick="OpenDiv('div4')">Fund Admins</a></h2>
</div>
And then I go into the content that is shown for each div id:
‘<div id=”div1″ style=”display: block;”>
<h1 style=”text-align: center;”>Investment Team</h1>
<h1 style=”text-align: center;”>[supsystic-gallery id=1 position=center]</h1>
</div>
<div id=”div2″ style=”display: none;”>
<h1 style=”text-align: center;”>Advisors</h1>
<h1 style=”text-align: center;”>[supsystic-gallery id=2 position=center]</h1>
</div>
<div id=”div3″ style=”display: none;”>
<h1 style=”text-align: center;”>Management</h1>
<h1 style=”text-align: center;”>[supsystic-gallery id=5 position=center]</h1>
</div>
<div id=”div4″ style=”display: none;”>
<h1 style=”text-align: center;”>Fund Admins</h1>
<h1 style=”text-align: center;”>[supsystic-gallery id=4]</h1>
</div>’
Not only do you alter the each link as I suggested, but the javascript needs to be altered to handle changing the styling much like what is done for the main content. Only send the numeric part of the ID in the onclick call, then construct the actual ID in script, for example: divStyle.color=('link'+id==linkname)?'black':'gray';
Hi bcworkz,
I tried to adjust the code as you said, but it doesn’t seem to be working. This is the updated code. Any thoughts on what I did wrong?
<script type="text/javascript">// <![CDATA[
function OpenDiv(id){
for (i=1;i<=100;i++) { /* so you can add up to 100 options on each page */ var divname = 'div'+i; var lonkname = 'link'+i; var divStyle = document.getElementById(divname).style; divStyle.display=('div'+id==divname)?'block':'none'; divStyle.color=('link'+id==linkname)?'black':'gray';} return false; }
// ]]></script>
<h2 style="text-align: center;"><a id="link1" style="cursor: pointer;" onclick="OpenDiv('1')";>Investment Team</a> <a href="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" rel="attachment wp-att-534"><img src="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" alt="divider" width="8" height="21" class="alignnone size-full wp-image-534" /></a> <a id="link2" style="cursor: pointer;" onclick="OpenDiv('2')">Advisors</a> <a href="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" rel="attachment wp-att-534"><img src="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" alt="divider" width="8" height="21" class="alignnone size-full wp-image-534" /></a> <a id="link3" style="cursor: pointer;" onclick="OpenDiv('3')">Management Team</a> <a href="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" rel="attachment wp-att-534"><img src="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" alt="divider" width="8" height="21" class="alignnone size-full wp-image-534" /></a> <a id="link4" style="cursor: pointer;" onclick="OpenDiv('4')">Fund Admins</a></h2>
</div>
<div id="div1" style="display: block;">
<h1 style="text-align: center;">Investment Team</h1>
<h1 style="text-align: center;">[supsystic-gallery id=1 position=center]</h1>
</div>
<div id="div2" style="display: none;">
<h1 style="text-align: center;">Advisors</h1>
<h1 style="text-align: center;">[supsystic-gallery id=2 position=center]</h1>
</div>
<div id="div3" style="display: none;">
<h1 style="text-align: center;">Management</h1>
<h1 style="text-align: center;">[supsystic-gallery id=5 position=center]</h1>
</div>
<div id="div4" style="display: none;">
<h1 style="text-align: center;">Fund Admins</h1>
<h1 style="text-align: center;">[supsystic-gallery id=4]</h1>
</div>
Hi bcworkz, I adjusted the code per your notes, but it doesn’t seem to be working. Here is the updated code. Any thoughts on what I did wrong?
<script type="text/javascript">// <![CDATA[
function OpenDiv(id){
for (i=1;i<=100;i++) { /* so you can add up to 100 options on each page */ var divname = 'div'+i; var lonkname = 'link'+i; var divStyle = document.getElementById(divname).style; divStyle.display=('div'+id==divname)?'block':'none'; divStyle.color=('link'+id==linkname)?'black':'gray';} return false; }
// ]]></script>
<h2 style="text-align: center;"><a id="link1" style="cursor: pointer;" onclick="OpenDiv('1')";>Investment Team</a> <a id="link2" style="cursor: pointer;" onclick="OpenDiv('2')">Advisors</a> <a id="link3" style="cursor: pointer;" onclick="OpenDiv('3')">Management Team</a> <a id="link4" style="cursor: pointer;" onclick="OpenDiv('4')">Fund Admins</a></h2>
</div>
<div id="1" style="display: block;">
<h1 style="text-align: center;">Investment Team</h1>
<h1 style="text-align: center;">[supsystic-gallery id=1 position=center]</h1>
</div>
<div id="2" style="display: none;">
<h1 style="text-align: center;">Advisors</h1>
<h1 style="text-align: center;">[supsystic-gallery id=2 position=center]</h1>
</div>
<div id="3" style="display: none;">
<h1 style="text-align: center;">Management</h1>
<h1 style="text-align: center;">[supsystic-gallery id=5 position=center]</h1>
</div>
<div id="4" style="display: none;">
<h1 style="text-align: center;">Fund Admins</h1>
<h1 style="text-align: center;">[supsystic-gallery id=4]</h1>
</div>
Joey
(@leglesslizard)
Hey,
I’m a little uncertain why you are running the for loop like you are but I’d adjust the code as follows:
<script type="text/javascript">// <![CDATA[
function OpenDiv(id){
var divname = 'div'+id;
var x = document.getElementsByClassName( "my_class" );
var i;
for (i = 0; i < x.length; i++) {
if ( x[i].id == divname ) {
x[i].style.backgroundColor = "black";
x[i].style.display = "block";
} else {
x[i].style.backgroundColor = "gray";
x[i].style.display = "none";
}
}
}
// ]]></script>
<div>
<h2 style="text-align: center;">
<a id="link1" style="cursor: pointer;" onclick="OpenDiv('1')";>Investment Team</a>
<a href="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" rel="attachment wp-att-534">
<img src="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" alt="divider" width="8" height="21" class="alignnone size-full wp-image-534" />
</a>
<a id="link2" style="cursor: pointer;" onclick="OpenDiv('2')">Advisors</a>
<a href="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" rel="attachment wp-att-534">
<img src="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" alt="divider" width="8" height="21" class="alignnone size-full wp-image-534" />
</a>
<a id="link3" style="cursor: pointer;" onclick="OpenDiv('3')">Management Team</a>
<a href="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" rel="attachment wp-att-534">
<img src="http://new.healthcatalystcapital.com/wp-content/uploads/2016/03/divider.png" alt="divider" width="8" height="21" class="alignnone size-full wp-image-534" />
</a>
<a id="link4" style="cursor: pointer;" onclick="OpenDiv('4')">Fund Admins</a>
</h2>
</div>
<div id="div1" class="my_class" style="display: block;">
<h1 style="text-align: center;">Investment Team</h1>
<h1 style="text-align: center;">[supsystic-gallery id=1 position=center]</h1>
<p style="color:white">Investment</p>
</div>
<div id="div2" class="my_class" style="display: none;">
<h1 style="text-align: center;">Advisors</h1>
<h1 style="text-align: center;">[supsystic-gallery id=2 position=center]</h1>
<p style="color:white">Advisors</p>
</div>
<div id="div3" class="my_class" style="display: none;">
<h1 style="text-align: center;">Management</h1>
<h1 style="text-align: center;">[supsystic-gallery id=5 position=center]</h1>
<p style="color:white">Management</p>
</div>
<div id="div4" class="my_class" style="display: none;">
<h1 style="text-align: center;">Fund Admins</h1>
<h1 style="text-align: center;">[supsystic-gallery id=4]</h1>
<p style="color:white">Fund</p>
</div>
I have added the <p> tags for a quick test locally. All this does is grabs all divs that have the class “my_class” (name it something meaningful!), loops through them and if the id of the div matches the onclick id, changes the styles as required. Otherwise it changes it back to how it was (gray and not displayed).
If I’ve missed the point I apologise but hopefully this steers you in the right direction 🙂
Btw, you had a typo in your code “lonkname” instead of “linkname” :p
regards!
Joey
(@leglesslizard)
Ugh, posted a reply but it doesnt seem to have gone through.
Edit: removed duplicate post because, in fact, id did go through…my bad!
