Я вызываю эту функцию Javascript:
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>
внутри вложенного элемента div, чтобы при нажатии на гиперссылку отображался один элемент, а другой скрывался, как этот фрагмент:
<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>
Функции отлично работают для расширения одного элемента div за один раз внутри большего контейнера div. Проблема в том, что когда я раскрываю любой из элементов, щелкая гиперссылку ... Большой контейнер div (красный квадрат градиента) выталкивает все за фон (сплошной серый квадрат) и портит внешний вид всей страницы, потому что div (который на несколько уровней выше), содержащий фон с фиксированной шириной (в качестве процентной ширины не будет работать). Я знаю точные две ширины, которые фон должен был бы расширять до динамического в результате щелчка гиперссылкой пользователем, но я понятия не имею, как это сделать из вышеупомянутой функции Javascript, которую я разместил. У кого-нибудь есть идеи или помощь для меня? Это очень запутанно, так как div, который мне нужно изменить, это полные 3 уровня вне вызова функции, с которой я работаю. Например, вызов функции происходит в последнем div этого потока:
# DIV topwrapper -> DIV # greySquareH -> DIV # LeftSide -> DIV # bioWrapper -> DIV # био
и приводит к генерированию div # First или div # Second внутри div # bio. Мне нужно изменить размер свойства div # greySquareH height. Спасибо за любую помощь заранее, ребята!