html - showing and hiding content with Javascript -
kindly see theme. when click on "about us, contact us, newsletter" shows div content except present content , clicking close button disappear. how this? want code in way.....
without seeing theme and/or code, can't more giving example code. 1 requires jquery i'm sure in standard javascript.
html:
<ul id="menu"> <li class="menu-item" id="menu-item-1">menu item 1</li> <li class="menu-item" id="menu-item-2">menu item 2</li> <li class="menu-item" id="menu-item-3">menu item 3</li> </ul> <div id="menu-content"> <div id="menu-content-1"> content of menu #1. </div> <div id="menu-content-2" hidden="hidden"> content of menu #2. </div> <div id="menu-content-3" hidden="hidden"> content of menu #3. </div> </div>
jquery:
/** wait until jquery ready */ jquery(document).ready(function() { var menu_items = jquery("#menu").find("li"); /** execute script if link within menu has been clicked */ menu_items.click(function() { /** id (in example number 1, 2 or 3) of clicked menu item. * need display corresponding content. */ var menu_item_id = jquery(this).attr("id").replace("menu-item-"); /** hide every menu item content */ menu_items.hide(); /** , display content referred clicked menu item */ jquery("#menu").find(".menu-content-" + menu_item_id).show(); }); });
not tested should fine.
Comments
Post a Comment