Почему текст внутри div скрыт?

Question

function clicked(IdClicked) { 
 
    var ElementClicked = document.getElementById(IdClicked); 
 
    ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden'; 
 
}

div.hidden { 
 
    height: 500px; 
 
} 
 
div { 
 
    height: 0px; 
 
    -webkit-transition: height 0.5s; 
 
    transition: height 0.5s; 
 
    overflow: hidden; 
 
}

<span onclick="clicked('homepage'); ">About</span> 
 
. . . 
 
<div id="homepage" class='hidden'> 
 
    <h1>Home Page</h1> 
 
</div> 
 
<div id="intro_page"> 
 
    <h1 id="intro_page_caption">About Me</h1> 
 
    <p id="intro_main_text">I enjoy reading, swimming, jogging, painting and exploring.</p> 
 
    <figure class="intro_pic1"> 
 
     <img src="img/award.jpg" alt="Receiving Award" height="250"/> 
 
    <figcaption>Award 2015</figcaption> 
 
    </figure> 
 
</div>

Функция JS переключает класс от '' к hidden по нажатию кнопки.

Проблема в том, что overflow:hidden делает текст intro_page_caption и intro_main_text полностью скрытым.

Кроме того, в настоящее время на моей веб-странице изначально показаны как divs (homepage, так и intro_page). При нажатии кнопки homepage скрывается, и intro_page занимает свое место.

Я уже пытался изменить высоту на разные значения, но это не решает проблему.

Я хочу добиться двух вещей:

1. тексте intro_page_caption, а также intro_main_text должны быть видны.

2. intro_page должно быть невидимым, когда видна homepage и наоборот.

Answer 1

вы подаете height: 0px и переход на все div s на странице, inclu ding div с вашим «о» контентом. поэтому цель только в #homepage div с вашим CSS

function clicked(IdClicked) { 
 
    var ElementClicked = document.getElementById(IdClicked); 
 
    ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden'; 
 

 
}

#homepage.hidden { 
 
    height: 500px; 
 
} 
 
#homepage { 
 
    height: 0px; 
 
    -webkit-transition: height 0.5s; 
 
    transition: height 0.5s; 
 
    overflow: hidden; 
 
}

<span onclick="clicked('homepage'); ">About</span> 
 
. . . 
 
<div id="homepage" class='hidden'> 
 
    <h1>Home Page</h1> 
 
</div> 
 
<div id="intro_page"> 
 
    <h1 id="intro_page_caption">About Me</h1> 
 
    <p id="intro_main_text">I enjoy reading, swimming, jogging, painting and exploring.</p> 
 
    <figure class="intro_pic1"> 
 
     <img src="img/award.jpg" alt="Receiving Award" height="250"/> 
 
    <figcaption>Award 2015</figcaption> 
 
    </figure> 
 
</div>

Answer 2

Вы должны изменить трехкомпонентную оператор из

function clicked(IdClicked) { 
    var ElementClicked = document.getElementById(IdClicked); 
    ElementClicked.className = ElementClicked.className == 'hidden' ? '' : 'hidden'; 
} 

этому

function clicked(IdClicked) { 
    var ElementClicked = document.getElementById(IdClicked); 
    ElementClicked.style.visibility = ElementClicked.style.visibility == 'hidden' ? 'visible' : 'hidden'; 
} 

правил CSS не может быть пустым, see visbility rules to set it.