javascript - Why is text inside div getting hidden? -

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 , exploring.</p>    <figure class="intro_pic1">        <img src="img/award.jpg" alt="receiving award" height="250"/>      <figcaption>award 2015</figcaption>    </figure>  </div>

the js function toggles class '' hidden @ click of button.

now, problem overflow:hidden makes text intro_page_caption , intro_main_text hidden @ times.

also, webpage shows both divs (homepage intro_page). @ click of button, homepage hidden , intro_page takes place.

i have tried changing height various values, doesn't solve problem.

i want achieve 2 things:

1. the text intro_page_caption intro_main_text should visible.

2. intro_page should invisible when homepage visible , vice-versa.

you applying height: 0px , transition disappear divs on page, including divs "about" content. target #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 , exploring.</p>    <figure class="intro_pic1">        <img src="img/award.jpg" alt="receiving award" height="250"/>      <figcaption>award 2015</figcaption>    </figure>  </div>