Activate the sliding toggle feature on click for all div elements

Whenever a specific li element is clicked, I aim to open its corresponding div element.

This is the code snippet I currently have:

<ul class="no-padding pro-list">
    <li><a href="#" class="pro-1 pro">A</a>
        <div class="proc-description panel-1">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-2 pro">B</a>
        <div class="proc-description panel-2">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-3 pro">C</a>
        <div class="proc-description panel-3">
            <p>a</p>
            <p>b</p>
            <p>c</p>
        </div>
    </li>
    <li><a href="#" class="pro-4 pro">D</a>
        <div class="proc-description panel-4">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-5 pro">E</a>
        <div class="proc-description panel-5">
            Hello world! Lorem ipsum doner inut.
                        <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-6 pro">F</a>
        <div class="proc-description panel-6">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-7 pro">G</a>
        <div class="proc-description panel-7">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="pro-8 pro">H</a>
        <div class="proc-description panel-8">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>
                Lorem ipsum doner inut.
                    Lorem ipsum doner inut.
            </p>
        </div>
    </li>
    <li><a href="#" class="proc-9 ">I</a></li>
    <li><a href="#" class="proc-10 ">J</a></li>
    <li><a href="#" class="proc-11 ">K</a></li>
</ul>

The current functionality works well with this script:

<script>
    jQuery(document).ready(function ($) {
        jQuery(".pro-2").click(function () {
            jQuery(".panel-2").slideToggle("slow");
        });
    });
</script>

However, I am looking to make it more dynamic. Instead of creating multiple functions for each a class and div class, I would like to create one function that can toggle all li elements.

jqueryhtmlcss

Answer №1

To efficiently handle events, it is recommended to assign a common class and then utilize traversal methods to target specific elements.

You can conveniently leverage the existing classes pro, anchor, and proc-description to achieve this functionality.

Implementation Example:

jQuery(document).ready(function($){
    jQuery("a.pro").click(function(){
       jQuery(this).next(".proc-description").slideToggle("slow");
   return false; 
  });            
});


jQuery(document).ready(function($){
    jQuery("a.pro").click(function(){
       jQuery(this).next(".proc-description").slideToggle("slow");
      
   });            
});
.proc-description {display:none}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="no-padding pro-list">
    <li><a href="#" class="pro-1 pro">A</a>

        <div class="proc-description panel-1">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-2 pro">B</a>

        <div class="proc-description panel-2">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-3 pro">C</a>

        <div class="proc-description panel-3">
            <p>a</p>
            <p>b</p>
            <p>c</p>
        </div>
    </li>
    <li><a href="#" class="pro-4 pro">D</a>

        <div class="proc-description panel-4">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-5 pro">E</a>

        <div class="proc-description panel-5">Hello world! Lorem ipsum doner inut.
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-6 pro">F</a>

        <div class="proc-description panel-6">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-7 pro">G</a>

        <div class="proc-description panel-7">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="pro-8 pro">H</a>

        <div class="proc-description panel-8">
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut.</p>
            <p>Lorem ipsum doner inut. Lorem ipsum doner inut.</p>
        </div>
    </li>
    <li><a href="#" class="proc-9 ">I</a>
    </li>
    <li><a href="#" class="proc-10 ">J</a>
    </li>
    <li><a href="#" class="proc-11 ">K</a>
    </li>
</ul>

Answer №2

Here is the solution to the issue:

<script>
        jQuery(document).ready(function($){
            jQuery("ul.items-list a.item").click(function(e){
                e.preventDefault();
                jQuery(this).next('section').slideToggle("slow");
            });
</script>

In this code snippet, e represents the event and preventDefault() stops anchor links from redirecting, allowing our toggle function to work correctly.

Answer №3

If you're looking for an alternative method, you can try this:

<ul class="no-padding pro-list">
<li><a href="javascript:void(0)" class="pro-1 pro" onclick="$(this).parent().find('.proc-description').toggle();">A</a>
    <div class="proc-description panel-1">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)"class="pro-2 pro" onclick="$(this).parent().find('.proc-description').toggle();">B</a>
    <div class="proc-description panel-2">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-3 pro" onclick="$(this).parent().find('.proc-description').toggle();">C</a>
    <div class="proc-description panel-3">
        <p>a</p>
        <p>b</p>
        <p>c</p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-4 pro" onclick="$(this).parent().find('.proc-description').toggle();">D</a>
    <div class="proc-description panel-4">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-5 pro" onclick="$(this).parent().find('.proc-description').toggle();">E</a>
    <div class="proc-description panel-5">
        Hello world! Lorem ipsum doner inut.
                    <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-6 pro" onclick="$(this).parent().find('.proc-description').toggle();">F</a>
    <div class="proc-description panel-6">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-7 pro" onclick="$(this).parent().find('.proc-description').toggle();">G</a>
    <div class="proc-description panel-7">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="pro-8 pro" onclick="$(this).parent().find('.proc-description').toggle();">H</a>
    <div class="proc-description panel-8">
        <p>Lorem ipsum doner inut.</p>
        <p>Lorem ipsum doner inut.</p>
        <p>
            Lorem ipsum doner inut.
                Lorem ipsum doner inut.
        </p>
    </div>
</li>
<li><a href="javascript:void(0)" class="proc-9 " onclick="$(this).parent().find('.proc-description').toggle();">I</a></li>
<li><a href="javascript:void(0)" class="proc-10 " onclick="$(this).parent().find('.proc-description').toggle();">J</a></li>
<li><a href="javascript:void(0)" class="proc-11 " onclick="$(this).parent().find('.proc-description').toggle();">K</a></li>


<style>
.proc-description{
    display: none;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to link the value of a mat-slider to an input field in a reactive form?

Is there a way to synchronize the min and max values of a ranged mat-slider with corresponding input fields? Currently, when I set numbers in the input fields, the slider updates correctly. However, when I use the slider to change the value of the input fi ...

javascripthtmlangulartypescriptangular-material

Tips for inserting multiple numbers from a single row into separate options within a SELECT statement

Is there a way to create a select box with multiple options that are based on one row from my MySQL table? For example, <?php if(!empty($row['size'])) { ?> <label>Size</label> ...

phphtmlmysql

Develop a jQuery dialog box without assigning an ID

I need help with jQuery to create a dialog that opens and then populates with values. When I tried to create the dialog using jQuery, it kept using old values because the div already existed on the page. I want to create a new instance of the dialog usin ...

javascriptjquerydialog

Generating an interactive Datepicker using Jquery

How can I design a dynamic date picker similar to the image provided below? https://i.sstatic.net/euoNI.png I have attempted to create one, but I am looking for a more interactive date picker. Is there a way to achieve the design shown in the image? The ...

javascriptjqueryhtmlcsstwitter-bootstrap

Initiate an animation upon reaching a designated element using Jquery scroll event

Hey there! I've been trying to create an animation without using any plugins, but unfortunately, I haven't had much luck so far. Here's the code I've been working on. If anyone can help me figure this out, I'd really appreciate it ...

jqueryhtmlcss

Steps to modify the background color of Bootstrap custom-file-input classes

I am struggling with changing the background color of my input[type="file"]. Despite researching similar issues, none of the solutions I found helped resolve my problem. I am hopeful that someone here can provide some assistance. Below is the snippet from ...

htmlcssasp.net-mvcbootstrap-4

Unique background image for every individual page

For my mobile app development using Jquery Mobile, I have implemented a custom theme but now want to vary the background images for different sections. My current code looks like this: .ui-overlay-a, .ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper { ...

jqueryhtmlcssjquery-mobilebackground-image

Can you explain the significance of Angular 2 hashtags within a template?

Currently exploring Angular 2 and stumbled upon the following code: <input #searchBox (keyup)="search(searchBox.value)" Surprisingly, it works! Despite its functionality, the significance of #searchBox eludes me. Extensive research in the documentati ...

javascripthtmlangulartypescript

When a CSS fluid layout includes a containing div with margin or padding, it may lead to

On my jsfiddle , the outermost wrapper div has a width of 100%. I am trying to create an inner div (tb_margin or tb_padding) where the content starts 40px from the left. I have attempted to use both margin and padding for this left spacing, but in both cas ...

htmlcssboxlayout

Disabling Skrollr function with jQuery

I was working on creating a basic webpage using skrollr and I encountered an issue. I am trying to make the script stop when the screen size is smaller than 1200. var s = null; if ($(window).width() >= 1200) { var s = skrollr.init(); } $(window). ...

jqueryskrollr

Issues with AngularJS ng-bind-html failing to display list items

I am working with a basic HTML document that looks like this... <ol> <li><strong>Test 1</strong></li> <li><strong>Test 2</strong></li> </ol> ...and I am attempting to connect it to a div ...

javascripthtmlangularjsng-bind-html

Refresh the Dom following an Ajax request (issue with .on input not functioning)

I have multiple text inputs that are generated dynamically via a MySQL query. On the bottom of my page, I have some Javascript code that needed to be triggered using window.load instead of document.ready because the latter was not functioning properly. & ...

javascriptphpjqueryhtmlajax

Implement a Loop that Generates Buttons with Popups Using jQuery Mobile

Within the context of XML parsing, I have utilized this code to generate buttons dynamically using a loop: $('#button' + counter + paramcounter).click(function(){ sendData(escape(parameterarray[cnt2] + $('#textinput' + cnt + cnt2).v ...

javascriptjqueryhtmljquery-mobile

Showing content within a <div> element using Jquery when clicked

Currently, I am using JSON to retrieve data : $(document).ready(function () { var url = '<%: Url.Content("~/") %>' + "Products/GetMenuList"; $.getJSON(url, function (data) { $.each(data, function (index, dataOption) { ...

jqueryjson

Basic Django button for triggering view function

After attempting tutorials for a few days, I've decided to throw in the towel. Any assistance would be greatly appreciated. I'm struggling to make this work - it seems straightforward, but it's actually quite complex. All I'm trying to ...

jqueryajaxdjangovariablesbutton

Struggling to modify a string within my React component when the state is updated

Having a string representing my file name passed to the react-csv CSVLink<> component, I initially define it as "my-data.csv". When trying to update it with data from an axios request, I realize I may not fully understand how these react components w ...

htmlreactjstypescriptaxioscomponents

Achieve a full height for children without the need to specify a fixed height for the

I'm currently working on a container div that houses two child divs: the first one, positioned to align with its parent's left border, contains a series of buttons while the second one holds the main content. In essence, it operates like a tab na ...

htmlcssheight

A rightward sliding submenu that appears upon clicking a button

I have a vision of creating an admin control panel for my website, featuring a set of buttons. I envision that when one of the buttons is clicked, the corresponding sub-menu will appear alongside it. For instance, if "My Account" is selected, its sub-menu ...

htmlcssweb

Challenges with ASP.NET MVC controller actions and jQuery AJAX requests

I've been attempting to pass JsonResult into my jQuery AJAX function using the following code: $.ajax({ contentType: 'application/json, charset=utf-8', type: "POST", url: "/Controller/TestJson", cache: ...

asp.net-mvcjsonjquery

Tips for ensuring an HTML element remains within defined boundaries

Currently working on a visualization tool for search algorithms using React, I've encountered a minor issue when moving the start or end nodes. Upon clicking and dragging the mouse across the grid, the nodes adjust accordingly until reaching the grid& ...

javascripthtmlreactjs