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:
the text
intro_page_captionintro_main_textshould visible.intro_pageshould invisible whenhomepagevisible , 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>
Comments
Post a Comment