A guide to mastering the art of descending using three distinct class types

My script is functioning properly for a single class, but it fails to work for multiple classes with the same purpose. I attempted to transfer from div (#panel) to class (.panel) as I am using several classes. However, this adjustment did not resolve the issue. Does anyone have a solution for this? Please refer to my jsfiddle link to identify the problem: http://jsfiddle.net/2FPZE/1/

Here is the HTML code:


    <div class="more-link"> more </div>
        <div class="panel">
                <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
              </div>

<div class="more-link"> more </div>
        <div class="panel">
              <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
                    <p> Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. </p>
              </div>

This section presents my script:


$(document).ready(function(){
        $(".more-link").click(function(){
        $(".panel").slideDown("slow");
        $(".more-link").remove();
      });
    });

And here is the CSS styling:

.panel {
    display:none;
}

Answer №1

To select the .panel that is related to the clicked .more-link, you must use a relative approach.

Within the click event, this == .more-link.

Therefore, you can achieve this by:

$(document).ready(function () {
    $(".more-link").click(function () {
        $(this).next(".panel").slideDown("slow")
        .end().remove();
    });
});

View demo on JSFiddle : http://jsfiddle.net/2FPZE/5/


.next()

.end()

Important Note

This code will function as intended with your current DOM structure. However, if you add elements between the link and the text, adjustments will need to be made to the code.

Answer №2

Did you even bother testing this on JSFiddle? Firstly, you forgot to include the JQuery Framework

Look closely, nothing is being selected so how do you plan to trigger the event?

This snippet can be used for both link elements

    $(".more-link").click(function () {
       $(".panel").slideDown("slow");
       $(".more-link").remove();
    });

Remember, there's no need to add

$(document).ready(function () {});
in JSFiddle

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

Develop a unified help document that is compatible across multiple platforms using an existing markdown file

I have been tasked with working on an existing project that already has detailed functionality and relevant information in a markdown file. My goal is to create a universal help file that can be easily viewed on various platforms including Windows, macOS ...

Is there a way to automatically hide divs with the style "visibility:hidden" if they are not visible within the viewport?

Currently, I am working on developing a mobile web app. Unfortunately, Safari in iOS 5.1 or earlier has limited memory capabilities. In order to reduce memory usage while using css3 transitions, I have discovered that utilizing the css styles "display:none ...

Mysterious CSS "manifestation" perplexes Chrome while evading Firefox's gaze

There seems to be an issue with the jQuery plugin on this demo page: If you access it using Firefox, you'll notice that the social sharing buttons are visible and functioning properly. However, in Chrome, there appears to be a peculiar CSS computatio ...

Having trouble getting the Bootstrap tooltip to work on a Select option?

Is there a way to have a tooltip displayed for each option in the select box? <select ng-model="rightList" class="form-control" size="13" multiple> <option ng-repeat="item in selectedList" value="{{$ ...

Transformation of looks post a refresh

Initially, the CSS and appearance of the page look fine when I first open it (after clearing the cache). However, upon refreshing the page, a part of it changes (specifically, the padding direction of a div). This change occurs consistently with each refre ...

Creating a hover effect on a specific area of a map is a useful technique

Can someone please help me create a hover effect for areas in maps? Below is the code for the map. Thank you in advance! Here is the image. <img src="[CR_kraje_1_úroveň_v1] (imported)" width="770" height="443" border="0" usemap="#map" /> &l ...

Is the in-app browser of WeChat able to support self-signed HTTPS URLs?

My local WAMP server hosts a web application with self-signed SSL enabled, resulting in the following app URL: https://myipaddress:port/demoapp/index.html However, when I send this URL via WeChat chat and click on it, only a blank page is displayed. Stra ...

Tips on sending an image to a WebMethod through jQuery

I have a WebMethod in ASP.NET that looks like this. [WebMethod] public static void AddCameraImage(string imageArray) { //do something } Currently, I am trying to read an image from a canvas element and then POST it to the above met ...

Efficiently filter through numerous options with a search-enabled multiselect feature

I am working on a Sveltekit Project that uses Bootstrap (Sveltestrap), and I am looking to implement a search function for it. My goal is to have an input field where users can type in the desired value and then be able to select multiple values like in a ...

Divs expanding below content in IE on a particular server

Currently, I am facing an issue with a JavaScript div that expands correctly over other content in most situations but goes under the content in one specific scenario. I am unsure about where to begin debugging this problem. To provide some context, the d ...

Press the button to use PHP to remove a row from MySQL by its corresponding ID

Hey there, I'm facing an issue with my HTML form. I have a button named "delete" and next to it, there's an input field where the logged-in user is supposed to enter a number corresponding to an ID and then press the delete button to remove the r ...

Is there a way to disable or deactivate all jQuery functions at once?

I have developed an application with push state functionality and it is running smoothly. However, I am facing an issue where my jQuery functions are being triggered multiple times in certain cases. This happens because every time I call push state, the sp ...

What is the best way to apply Jquery's removeClass to an element that has been dynamically loaded through ajax?

I have encountered an issue while trying to remove a class using Jquery's removeClass() on an element pulled in via Ajax. While I am familiar with using .live() for actions like 'click', I need guidance on what approach to take for functions ...

A more concise approach to crafting ajax requests

Lately, I've been immersed in building various web applications using php, mysql, jquery, and bootstrap. Now, I'm faced with a common issue - how to streamline my ajax queries for posting data? Writing code that is not only functional but also a ...

Total aggregate for a variety of Sliders (Bootstrap 4 & jQuery)

I am currently working on a web page that involves implementing 3 sliders. The total of all three sliders should always be limited to 100%. This project utilizes the Bootstrap 4 framework and jQuery 3.6.2 Here are my current challenges: The combined valu ...

jQuery Bootgrid Pagination issue: Unable to successfully pass the current page element

My experience with jQuery Bootgrid has been a bit challenging as I encountered 2 problems related to Pagination. Below is the JavaScript code that I have been working with: The data method in the code below seems to be defaulting to GET, even though I ...

Preventing the page from scrolling to the top while utilizing an Angular-bootstrap modal and a window position:fixed workaround on an iPad

It's common knowledge that there is a bug in bootstrap modals on certain devices, causing the page behind the modal to scroll instead of the modal itself (http://getbootstrap.com/getting-started/#support-fixed-position-keyboards) An easy fix for this ...

Retrieving Form Validation Error Value in AngularJS

Incorporating AngularJS 1.2 RC2 and utilizing Bootstrap for CSS, I have constructed a straightforward form as shown below: <form class="form-horizontal" name="form" novalidate> <label class="col-lg-2 control-label" for="name">Name</labe ...

Using a global variable to change the class of the <body> element in AngularJS

I've recently developed an angularJS application. Below is the index.html <html ng-app="MyApp"> <head> <!-- Import CSS files --> </head> <body class="{{bodylayout}}"> <div ng-view></div> < ...

Customize material-ui button designs using styled-components

I'm currently facing an issue with overriding the border-radius of a material-ui button using styled-components. Despite setting it to 0, it's not taking effect. Here is the code snippet: import React from "react"; import styled from "styled-co ...