Home › Forums › JavaScript › Help with re-hiding the element after it has appeared
- This topic is empty.
-
AuthorPosts
-
August 24, 2012 at 11:48 am #39508JosiahBMember
Hey! I need some help with this code … I have it so that when the page is first viewed nothing is there, but when you click on each link they appear one by one (and if you click the same one it then disappears)… but I want the other div to disappear when the next link is clicked on and not just stack underneath each other …
Any help would be appreciated!!
Thanks!!!
Camps For Christ
Camps For Christ
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel. Cras ac enim in quam bibendum interdum vel eu massa. Ut rutrum risus ac nisl lacinia eu consequat turpis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce lacus justo, volutpat sit amet vestibulum eu, convallis eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc bibendum gravida nulla vitae porta. Suspendisse sit amet dui at sapien sollicitudin faucibus. Aliquam vel urna faucibus nunc convallis facilisis dapibus vel lorem. Aenean viverra sagittis erat, ut ultrices urna iaculis in. Aliquam auctor ultrices nibh, a vestibulum lacus luctus eget. Donec a nisi eget ipsum volutpat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Aliquam erat volutpat. Quisque pretium, erat ac laoreet pulvinar, sem ipsum malesuada erat, nec tristique arcu erat molestie arcu. Aliquam ante nisi, elementum a tristique eget, imperdiet quis justo. Praesent vehicula nulla massa. Morbi quam libero, aliquam quis elementum id, egestas ultrices eros. Pellentesque vestibulum vulputate accumsan. In volutpat lobortis fringilla. Suspendisse nec augue nisl, eget consequat nisl. Vivamus condimentum aliquam est eu tempus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nullam nec quam tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed quis erat enim. Etiam in laoreet libero.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel. Cras ac enim in quam bibendum interdum vel eu massa. Ut rutrum risus ac nisl lacinia eu consequat turpis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce lacus justo, volutpat sit amet vestibulum eu, convallis eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc bibendum gravida nulla vitae porta. Suspendisse sit amet dui at sapien sollicitudin faucibus. Aliquam vel urna faucibus nunc convallis facilisis dapibus vel lorem. Aenean viverra sagittis erat, ut ultrices urna iaculis in. Aliquam auctor ultrices nibh, a vestibulum lacus luctus eget. Donec a nisi eget ipsum volutpat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel. Cras ac enim in quam bibendum interdum vel eu massa. Ut rutrum risus ac nisl lacinia eu consequat turpis faucibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Fusce lacus justo, volutpat sit amet vestibulum eu, convallis eu nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nunc bibendum gravida nulla vitae porta. Suspendisse sit amet dui at sapien sollicitudin faucibus. Aliquam vel urna faucibus nunc convallis facilisis dapibus vel lorem. Aenean viverra sagittis erat, ut ultrices urna iaculis in. Aliquam auctor ultrices nibh, a vestibulum lacus luctus eget. Donec a nisi eget ipsum volutpat commodo. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
August 25, 2012 at 6:37 am #108447BillyParticipantI’ve made it on CodePen: http://codepen.io/Druid-of-Luhn/pen/wdKHv
So, here is a simple bit of code you just copy/past into the <head> tag. Just change the
>
into a ‘>’.
And I would change your ‘main_content’ div to this:
Camps
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel.
...
Register
Aliquam erat volutpat. Quisque pretium, erat ac laoreet pulvinar, sem ipsum malesuada erat, nec tristique arcu erat molestie arcu. Aliquam ante nisi, elementum a tristique eget, imperdiet quis justo. Praesent vehicula nulla massa. Morbi quam libero, aliquam quis elementum id, egestas ultrices eros.
...
References
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat port a vel.
...
Contact
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis nec odio sed arcu mattis laoreet vitae at felis. Nam eget libero et lacus mattis blandit non ultrices quam. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Proin interdum placerat eros, sed dapibus erat porta vel.
...
August 28, 2012 at 10:40 pm #108650JosiahBMemberThanks So much!!!!
August 28, 2012 at 11:53 pm #108655Michael_bondsMemberIf you are using jQuery, you can also simple use the following:
$('someSelector').on('click', function() {
$(this).toggle(duration);
});Make sure to replace someSelector with an actual css selector, and duration with an actual time in milliseconds.
August 29, 2012 at 3:22 am #108679BillyParticipantJust using toggle isn’t enough: he wants all other elements to be hidden when you click that one as well, not just itself.
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.