Learning javascript, can't figure out hide and show elements -
edit- see written in javascript, not jquery or framework please.
i know accomplished jquery, i'd learn javascript behind magic, , have been reading dom scripting jeremy keith.
i've gotten ways through book, doing examples copy code far different trying build yourself.
right i'm trying simple (for others): hide paragraph element when header2 element above clicked. here html:
<div id="contentarea"> <h2><a href="#">heading articles</a></h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem @ nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla. </p> <h2><a href="">second heading articles</a></h2> <p>lorem ipsum dolor sit amet, consectetur adipiscing elit. integer nec odio. praesent libero. sed cursus ante dapibus diam. sed nisi. nulla quis sem @ nibh elementum imperdiet. duis sagittis ipsum. praesent mauris. fusce nec tellus sed augue semper porta. mauris massa. vestibulum lacinia arcu eget nulla. </p> </div><!-- end main content ---------------->
i'm trying figure out steps necessary accomplish it, , can't spell out myself in plain english, less javascript.
i'm trying create block of code "whenever h2 element within div id contentarea clicked, find next paragraph below , hide view."
// select h2 inside contentaread var elems = document.getelementbyid('contentarea').getelementsbytagname('h2'), i; // each 1 for(i = 0; < elems.length; i++) elems[i].onclick = function(){ var sibling = this; // while there sibling while(sibling = sibling.nextsibling){ // if sibling p tag if(sibling.nodename == 'p'){ // hide sibling.style.display = 'none'; // exit loop break; } } };
Comments
Post a Comment