Скачать или смотреть How to Display a Div by Clicking a List Item with jQuery

Learn how to easily show and hide content sections by clicking list items using jQuery. This guide will walk you through coding a simple solution for better interactivity in your web projects.
---
This video is based on the question https://stackoverflow.com/q/63659445/ asked by the user 'Ishan Ahmed' ( https://stackoverflow.com/u/13751366/ ) and on the answer https://stackoverflow.com/a/63659630/ provided by the user 'kmoser' ( https://stackoverflow.com/u/378779/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: How can I display a div by clicking list item

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Display a Div by Clicking a List Item with jQuery

Have you ever wanted to create an interactive user interface where clicking on different list items reveals corresponding content on your webpage? This is a common requirement in web development, especially when building tabs or navigation menus. In this guide, I'll guide you through an effective solution using HTML, CSS, and jQuery to accomplish this behavior seamlessly.

Understanding the Problem

The main goal is to have multiple list items (like Tours, Visa, etc.), each linked to a specific div that should display its content when the corresponding list item is clicked. If another list item is clicked, the previously displayed content should hide automatically. This interaction creates a cleaner and more user-friendly experience.

Example Scenario

Imagine you have a list of services on your site and clicking each service should show detailed information about that service while hiding any previously displayed content. This makes navigating through topics straightforward and avoids crowding the interface.

Building the Solution

To achieve the desired functionality, follow these steps:

Step 1: Set Up Your HTML

The foundation consists of an unordered list for the clickable items and divs for the content sections.

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Style the Content with CSS

Add some basic styling to the content areas to ensure clarity and visual separation.

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Write the jQuery Logic

Now, let's implement the jQuery that handles the click events. This script will switch visibility between the divs based on the clicked list items.

[[See Video to Reveal this Text or Code Snippet]]

Explanation of the Script

Event Binding: We attach a click event to all list items (li).

Class Management: When a list item is clicked, the active class is removed from all and applied only to the clicked item.

Hiding & Showing Content: All content divs are hidden first. The specific div associated with the clicked list item's data-id is then made visible.

Conclusion

With these steps, you can create an efficient and interactive interface that enhances user experience by utilizing simple jQuery functionalities alongside HTML and CSS. Now, when users click on a list item, they will see the relevant content, keeping your webpage organized and clean.

Feel free to customize the content and styles as needed, expanding functionality or applying further designs to match your brand!

Happy coding!