hi everyone I have created one web page for website, these having four main Div but i have to do Show Div and Hide some Div using javascript or jquery in css. Four main Div are:- 1) header 2) banner 3) Content 4) footer :- on the website two div hide content and footer these two div are hidden when user open the website. :- And header and banner not hidden these two div are displaying data on website, the website width:- 960 and height:- 650, but should it work same in all major browser and one thing also in mind how to solve the height issue on basis of moniter configuration. :- on header having menu navigation button after click button's, content and footer div should be display or show on the bottom of the header div and banner div should be hide/hidden.
many different ways first write a function to hide all divs then write a function to show a div when the doc is read hide all divs then show the one you want loaded... then on click hide and show header when clicking header. hide all something like that it really depends what your header banner content footer are called and where they are located on the page
Thanks for your replay, i was try also but not do that what i want but I am looking some snapp please assist me if possible . Thanks in advanced.
Hi rohittripathi, Actually there are so many ways. But i can discuss to you the basic one. Example: Assuming this is your markup(html) <div id="show-header-banner"> <div class="header">This is header</div> <div class="banner">This is a banner ad</div> <a href="#" class="show-1">Show Content and footer</a> </div> <div id="show-Content-footer"> <div class="Content">This is Content</div> <div class="footer">This is footer</div> <a href="#" class="show-2">Show header and banner</a> </div> Code (markup): In jQuery, you need to have condition like this: <script type="text/javascript"> $(function(){ $('#show-Content-footer').hide(); //by default Content and footer are hidden $('.show-1').click(function(){ $('#show-header-banner').hide(); // once show-1 button clicked the show-header-banner div hide $('#show-Content-footer').show(); // once show-1 button clicked the show-Content-footer div appear }); $('.show-2').click(function(){ $('#show-Content-footer').hide(); // once show-2 button clicked the show-Content-footer div hide $('#show-header-banner').show(); // once show-2 button clicked the show-header-banner div appear }); }); </script> Code (markup): Complete code: (ready for copy/paste ) <!DOCTYPE html> <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div id="show-header-banner"> <div class="header">This is header</div> <div class="banner">This is a banner ad</div> <a href="#" class="show-1">Show Content and footer</a> </div> <div id="show-Content-footer"> <div class="Content">This is Content</div> <div class="footer">This is footer</div> <a href="#" class="show-2">Show header and banner</a> </div> <script type="text/javascript"> $(function(){ $('#show-Content-footer').hide(); //by default Content and footer are hidden $('.show-1').click(function(){ $('#show-header-banner').hide(); // once show-1 button clicked the show-header-banner div hide $('#show-Content-footer').show(); // once show-1 button clicked the show-Content-footer div appear }); $('.show-2').click(function(){ $('#show-Content-footer').hide(); // once show-2 button clicked the show-Content-footer div hide $('#show-header-banner').show(); // once show-2 button clicked the show-header-banner div appear }); }); </script> </body> </html> Code (markup): Again, this is just an idea and maybe this is not the best code for your requirements. I hope this help. Thanks and God bless always! Best regards, alfieindesigns Front-End Developer