Jquery - Change <ul> content on specific <li> click

Posted on 2014-09-16
Medium Priority
Last Modified: 2014-09-16

See attached HTML. I want to change the content (<li> list) of a <ul> when specific list items are clicked.

I found the attached Jquery on the web; it doesn't work, you can try it at http://rkassoc.org/Davis/menu/menu_test.htm. Click the top list item (Irrigation).

How can I make this work, Obviously, the replacement list is just a test, real content is more elaborate.


Question by:Richard Korts
LVL 58

Accepted Solution

Gary earned 2000 total points
ID: 40326590
As you have the function before the code actually exists it won't work as it doesn't exist in the DOM yet, you need to either move the jquery to the end of the page or wrap it in a doc ready function e.g.
$(function () {
    $('#irr').click(function () {
        $('#menu').html('<li>Context x</li><li>Context y</li><li>Context z</li>');

Open in new window


Author Closing Comment

by:Richard Korts
ID: 40326722


Featured Post

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
In this tutorial viewers will learn how to style elements, such a divs, with a "drop shadow" effect using the CSS box-shadow property Start with a normal styled element, such as a div.: In the element's style, type the box shadow property: "box-shad…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…

600 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question