Posted on by & filed under Content - Highlights and Reviews, Web Development.

In the previous tip, Collapsible Menus with Persistence, we made some simple jQuery to hide menus and keep them hidden in future page loads. But you may have some menus that you’d like to prevent that from happening on. With some small changes, we can do that.

First, we’ll make it so that the administration menu has the class “no hide”:

Then we’ll use .not() to change the jQuery to not apply to li.no-hide in the click function:

Now add the document load, so that if there is a cookie hiding these submenus for some reason, it won’t be applied:

And that’s it!

If you’re using this on a CMS you’ll want to avoid needing awkward code to test each dynamic menu, so you need to make a modification to our solution. Rather than changing the structure for a specific menu, you can alter the code to instead look for an element with the .nohide class inside the submenu container.

Let’s add an empty span with “nohide” in the administration menu:

Then change the .not() to focus on any that have a .nohide element, using :has():

And likewise changing the $(document).ready:

You have now gained a lot of flexibility with this widget, and you can easily customize it for other functionality.

Safari Books Online has the content you need

Check out these jQuery books available from Safari Books Online:

Want to add more interactivity and polish to your websites? Discover how jQuery can help you build complex scripting functionality in just a few lines of code Head First jQuery shows you how to navigate HTML documents while handling events, effects, callbacks, and animations. By the time you’ve completed the book, you’ll be incorporating Ajax apps, working seamlessly with HTML and CSS, and building your own plug-ins.
jQuery in Action, Second Edition is a fast-paced introduction and guide. It shows you how to traverse HTML documents, handle events, perform animations, and add Ajax to your web pages. The book’s unique “lab pages” anchor the explanation of each new concept in a practical example.
With these recipes, you’ll learn patterns and practices from 19 leading developers who use jQuery for everything from integrating simple components into websites and applications to developing complex, high-performance user interfaces. Ideal for newcomers and JavaScript veterans alike, jQuery Cookbook starts with the basics and then moves to practical use cases with tested solutions to common web development hurdles.

About the Author

  Ryan Macklin is freelance front-end developer, specializing in jQuery, JavaScript, PHP, HTML and CSS. He spends his off-hours as a freelance writer, editor and game designer, and maintains a blog revolving around game design and being a freelance writer & editor at http://RyanMacklin.com.

Tags: CMS, jQuery, nohide,

Comments are closed.