I am calling this javascript function:
var facing = "First";
function switchit(list){
if (list != facing){
document.getElementById(facing).style.display="none";
};
var listElementStyle=document.getElementById(list).style;
if (listElementStyle.display=="none"){
listElementStyle.display="block";
} else {
listElementStyle.display="none";
}
facing = list;
}
</script>inside a nested div so that when a hyperlink is clicked it will show one element and hide the other like this snippet:
<div id="bio">
<!--Ty Expansion -->
<p> <span class="bioEmphasis">What</span> O.L.L.I.E. Lifestyle represents is very personal to me. It has been an aspiration of mine to dedicate myself to the betterment and empowerment of our youth. <a href="javascript:switchit('First')">Click to read more..</a><br />
<div id="First" style="display: none;">
</p>
<hr/><p> <span class="bioEmphasis">Apart</span> of a society where the vast majority of youth are growing up in single parent homes (many in low income neighborhoods). I have witnessed first hand how heavily influenced the youth are by television, music and movies. More Educators, Athletes and Professionals are needed to lend encouragement and guidance on becoming productive members to our environment instead of adapting to a fatal cliché of being a product of their environment.</p>
</div>
<p>
<span class="bioEmphasis">Life is</span> a crazy game!! The trick is to learn how to play! Growing up in New Jersey, the second youngest out of eight, I was fortunate enough to see how the game is NOT supposed to be played. I watched my brothers and sister go through dealing with the law, drugs, and a “content” way of life. This was the beginning of me really wanting to live my life in excellence. <a href="javascript:switchit('Second')">Click to read more..</a><br />
<div id="Second" style="display: none;">
</p>
<hr/><p> <span class="bioEmphasis">All through</span> middle and high school, I was an honor student. Unfortunately, I always was attracted to the “under life”. It seemed like the more popular, in crowd thing to do. I felt like this because of some of my earlier struggles. Having a distinct name and a handicapped brother would fuel my want to be a part of the normal crowd. I can fondly remember being constantly made fun of for being different. Little did I know, what I was doing all along was the right thing and would pay off.</p>
<hr />
</div>
</div>The functions works perfectly to expand one div element at a time inside the larger div container. The problem is that when I expand either of the elements by clicking the hyperlink...The larger div container(red gradient square) pushes everything past the background (solid grey square) and screws up the look of the entire page because the div, (which is a few levels up), containing the background is a fixed width, (as a percentage width would not work). I know the exact two widths the background would need to expand to dynamically as a result of the hyperlink being click by a user, but I do not have any idea how to do this from within the aforementioned javascript function I posted. Does anyone have any idea or help for me? It is very confusing as the div I need to resize is a full 3 levels outside of the function call I am working with. As an example the function call is happening in the last div of this flow:
div#topwrapper-->div#greySquareH-->div#LeftSide-->div#bioWrapper-->div#bio
and results in either a div#First or div#Second being generated inside the div#bio. I need to resize the div#greySquareH height property. Thanks for any help in advance guys!