How to toggle single element with this same class like another


Tags: jquery,html,css,html5

Problem :

I have HTML code something like this:

<img src="img.png" class="arrow"><h2 class="title">Heading 1</h2>
<p class="intro">Lorem Ipsum 1</p>

<img src="img.png" class="arrow"><h2 class="title">Heading 2</h2>
<p class="intro">Lorem Ipsum 2</p>

<img src="img.png" class="arrow"><h2 class="title">Heading 3</h2>
<p class="intro">Lorem Ipsum 3</p>

If I click first img element I would like to toggle "intro" class, but only the first element. If I click secont img, toggle second "intro", etc. How I can do this in jQuery? ("intro" has display:none; in CSS). I tried select pseudo-class:

$(".intro:first-child").click(function() {
    $("intro:first-child").toggle();
}

but it doesn't work. Maybe I should use id (id="intro-1", "intro-2", etc) instead class and select in jQuery each element separately?



Solution :

Use nextAll() method and :first pseudo class selector. Attach click event handler to the img tag and inside handler this refers to the clicked elements dom object.

// attach click event handler to all img tag
$(".arrow").click(function() {
    // get first `.intro` after the clicked img tag
    $(this).nextAll('.intro:first').toggle();
})

$(".arrow").click(function() {
  $(this).nextAll('.intro:first').toggle();
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src="img.png" class="arrow">
<h2 class="title">Heading 1</h2>
<p class="intro">Lorem Ipsum 1</p>

<img src="img.png" class="arrow">
<h2 class="title">Heading 2</h2>
<p class="intro">Lorem Ipsum 2</p>

<img src="img.png" class="arrow">
<h2 class="title">Heading 3</h2>
<p class="intro">Lorem Ipsum 3</p>


    CSS Howto..

    How to set CSS hover on input

    How to apply an opacity without affecting a child element with html/css?

    selectCheckboxMenu: items are shown with bold font

    How do I make this carousel implementation better?

    How to control element position when changing window size for parallax purpose

    css transition effects on show/hide element using css3 [duplicate]

    How to apply css to 'text' and 'password' together [closed]

    How to create a QT plugin that customizes UI?

    jQuery select box Show/hide div

    How can I make an image carousel with only CSS?

    How to style Menu border/outline in JavaFX8 using CSS?

    Given an url, how could a script find what resources are loaded?

    CSS Background Color Not Showing

    Navigation bar - How to keep the page highlighted when selected?

    How do I prevent it from newlining in html?

    How to override global style for img tag in css

    How do I get the border-radius from an element using jQuery?

    Page not displaying, error not shown in console?

    How to define specific CSS rules for IE9 alone?

    How can a directory/folder name affect page rendering?

    How do I link to top of a section on the page minus the height of a fixed nav-bar?

    How to create shaded divs like this with CSS

    How to make a background color stretch to left and right of viewport in Safari Browsers

    CSS how to automatically resize div size?

    CSS - How to make position:absolute work not on all 100% screens area

    How to define link text color in UIWebView

    How do you keep zoom between pages consistent? via CSS?

    How to change CSS based on Season using JavaScript

    how to get rid of firefox image border

    How to make CSS scroll panel for custom purposes?