Solved

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

Posted on 2014-09-16
2
880 Views
Last Modified: 2014-09-16
Hi,

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.

Thanks,

Rkorts
menu-test.htm
0
Comment
Question by:Richard Korts
2 Comments
 
LVL 58

Accepted Solution

by:
Gary earned 500 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

0
 

Author Closing Comment

by:Richard Korts
ID: 40326722
Perfect!

Thanks
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

In this article you'll learn how to use Ajax calls within your CodeIgniter application. To explain this, I'll illustrate how to implement a simple contact form to allow visitors to send you an email through your web site.
Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
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 style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

758 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

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now