jQuery divs display and conceal

Question

jQuery divs display and conceal

Looking for help with this code structure:

Here's the HTML:

<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

And here's the jQuery code:

$(document).ready(function () {
    $('.a').click(function () {
        if ($('.b').is(":visible")) {
            $('.b').hide();
        } else {
            $('.b').show();
        }
        return false;
    });
});

How can I modify this to only show the div that was clicked on?

JSFiddle.

javascript jquery html css

Answer 1

Answer №1

Feel free to utilize the following code snippet. View the DEMO

Discover more about jquery's next() function.

Retrieve the immediate next sibling of each element within the matched elements. If a selector is specified, it will only fetch the next sibling if it meets that criteria.

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
    // $('.b').hide();  if you want to hide opened div uncomment this line
     var bOBJ = $(this).next('.b');
    if (bOBJ.is(":visible")) {
        bOBJ.hide();
    } else {
        bOBJ.show();
    }
    //return false;
  });
});

Alternatively, explore another method in the DEMO

Learn about Jquery's toggle() functionality

Show or hide the selected elements.

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
     // $('.b').hide();  if you want to hide opened div uncomment this line  
    $(this).next('.b').toggle();
     //return false;
   });
 });

Answer 2

Feel free to utilize the following code snippet. View the DEMO

Discover more about jquery's next() function.

Retrieve the immediate next sibling of each element within the matched elements. If a selector is specified, it will only fetch the next sibling if it meets that criteria.

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
    // $('.b').hide();  if you want to hide opened div uncomment this line
     var bOBJ = $(this).next('.b');
    if (bOBJ.is(":visible")) {
        bOBJ.hide();
    } else {
        bOBJ.show();
    }
    //return false;
  });
});

Alternatively, explore another method in the DEMO

Learn about Jquery's toggle() functionality

Show or hide the selected elements.

 $(document).ready(function () {
   $('.a').click(function (e) {
     e.preventDefault();
     // $('.b').hide();  if you want to hide opened div uncomment this line  
    $(this).next('.b').toggle();
     //return false;
   });
 });

Answer 3

Answer №2

When searching for the nearest div.b, you can utilize jQuery.siblings(). Instead of relying on .show() and .hide(), consider using jQuery.toggle()

$(function() {
    $('.a').click(function() {
        $(this).siblings('.b').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

Answer 4

When searching for the nearest div.b, you can utilize jQuery.siblings(). Instead of relying on .show() and .hide(), consider using jQuery.toggle()

$(function() {
    $('.a').click(function() {
        $(this).siblings('.b').toggle();
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

Answer 5

Answer №3

PLEASE VERIFY

 $('.a').click(function () {
        
            $('.b').hide();
        $(this).siblings('.b').show();
       
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

Answer 6

PLEASE VERIFY

 $('.a').click(function () {
        
            $('.b').hide();
        $(this).siblings('.b').show();
       
        return false;
    });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>
<div class="container">
    <button class="a">Button</button>
    <div class="b" hidden="hidden">Content</div>
</div>

Answer 7

Answer №4

Kindly refer to the code snippet below

$('.toggle').click(function(){
$(this).next('.content').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
    <button class="toggle">Toggle</button>
    <div class="content" hidden="hidden">Lorem Ipsum</div>
</div>
<div class="container">
    <button class="toggle">Toggle</button>
    <div class="content" hidden="hidden">Dolor Sit Amet</div>
</div>

Answer 8

Kindly refer to the code snippet below

$('.toggle').click(function(){
$(this).next('.content').slideToggle();
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="container">
    <button class="toggle">Toggle</button>
    <div class="content" hidden="hidden">Lorem Ipsum</div>
</div>
<div class="container">
    <button class="toggle">Toggle</button>
    <div class="content" hidden="hidden">Dolor Sit Amet</div>
</div>

Answer 9

Answer №5

    $(document).ready(function () {
    $('.click-me').on('click', function () {
        var parentNode = $(this).parent();
        var targetContent = parentNode.find(".inner-content").first();

        if ($(targetContent).is(":visible")) {
            $(targetContent).hide();
        } else {
            $(targetContent).show();
        }
        return false;
    });
});

Answer 10

    $(document).ready(function () {
    $('.click-me').on('click', function () {
        var parentNode = $(this).parent();
        var targetContent = parentNode.find(".inner-content").first();

        if ($(targetContent).is(":visible")) {
            $(targetContent).hide();
        } else {
            $(targetContent).show();
        }
        return false;
    });
});

Answer 11

Answer №6

If you want to display and conceal an alternative, the .toggle() method can be used effectively. Give this a shot.

 $(document).ready(function () {
  $('.a').click(function () {
   $(this).next('.b').toggle(1000);
 });
});

Answer 12

If you want to display and conceal an alternative, the .toggle() method can be used effectively. Give this a shot.

 $(document).ready(function () {
  $('.a').click(function () {
   $(this).next('.b').toggle(1000);
 });
});

Answer 13

Answer №7

If you're looking for a quick and simple solution, you can find it here: sfiddle.net/webyourway/aahqh80q/9/

The use of the 'hidden' HTML attribute is quite uncommon. Personally, I've never used it before. It seems that this attribute should be reserved for elements that need to be hidden regardless of presentation. In your situation, using CSS display:none may be a better option.

$(document).ready(function () {
    $('.a').click(function () {
        $('.b').hide();
        $(this).next('.b').show();
    });
});

Answer 14

If you're looking for a quick and simple solution, you can find it here: sfiddle.net/webyourway/aahqh80q/9/

The use of the 'hidden' HTML attribute is quite uncommon. Personally, I've never used it before. It seems that this attribute should be reserved for elements that need to be hidden regardless of presentation. In your situation, using CSS display:none may be a better option.

$(document).ready(function () {
    $('.a').click(function () {
        $('.b').hide();
        $(this).next('.b').show();
    });
});

jQuery divs display and conceal

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Similar questions

Two keyframes are unable to function simultaneously

How to hide functions in Angular source code

Freemarker substitute & and &ampersand;

The error encountered is an unhandled rejection with a message stating "TypeError: Cannot access property 'username' of null

What is the best method to display a tooltip for a disabled radio button within a set of radio buttons?

What could be causing my Time Picker MUI to malfunction in my React project?

focusing on two different sections with a single hover effect

When using JavaScript to style.display = "block", the Bootstrap-4 column layout may experience a display break

Disable the form options listed on the table

Ways to invoke external jQuery functions within Angular applications

Sequential jQuery AJAX requests triggering in an incorrect sequence

How can I pass the dynamically generated ID from PHP to AJAX/jQuery using an anchor tag?

Having trouble loading xml/xsl files on IE11? Consider enabling compatibility mode to ensure smooth rendering on your xml/xsl page

Delete the designated column from the table

Hidden input field when inactive

When the dropdown menu is displayed, apply a class to the parent <li> element's

Unable to change the color of the tab indicator

Executing a transaction in Firestore

Issues Arising When Transmitting a Multidimensional Array from Jquery to PHP - Where Am I Going Astray?

Adjusting the height of an element in AngularJS based on its width dynamically