How come the hidden container does not reappear after I click on it?

Question

How come the hidden container does not reappear after I click on it?

I'm having an issue with a hidden container that holds comments. Inside the container, there is a <div> element with a <p> tag that says "Show all comments". When I click on this element, it successfully displays the comments. However, clicking on it again does not hide the comments container. I suspect that there might be an error in my jQuery code. Can you help me figure out what's wrong?

var commentsHidden = $( ".comments-container" ).is( ":hidden" );

if (commentsHidden) {
  $( ".see-all" ).click(function() {
      $('.comments-container').show('slow');
      $('.see_hide').text('Hide Comments');
    });

} else {

    $( ".see-all" ).click(function() {
      $('.comments-container').hide();
    });

};

javascript jquery html css

Answer 1

Answer №1

Make sure to update the commentsHidden variable each time the click event is triggered, so it reflects the current visibility status of the comments container. This way, you can simplify your code by removing the if statement and directly handling the show/hide logic based on the updated value of commentsHidden.

$(".see-all").click(function() {
    var commentsHidden = $(".comments-container").is(":hidden");
    if (commentsHidden) {
        $('.comments-container').show('slow');
        $('.see_hide').text('Hide Comments');
    } else {
        $('.comments-container').hide();
    }
});

Answer 2

Make sure to update the commentsHidden variable each time the click event is triggered, so it reflects the current visibility status of the comments container. This way, you can simplify your code by removing the if statement and directly handling the show/hide logic based on the updated value of commentsHidden.

$(".see-all").click(function() {
    var commentsHidden = $(".comments-container").is(":hidden");
    if (commentsHidden) {
        $('.comments-container').show('slow');
        $('.see_hide').text('Hide Comments');
    } else {
        $('.comments-container').hide();
    }
});

Answer 3

Answer №2

When you utilize the on('click', ..) function or its shorthand version click(..), a new handler is attached. This results in multiple handlers being associated with the same object, all of which are triggered. To avoid this, it's best to either set up the handler only once:

// Implement this in global code or code running upon module load
// Just one time!
$(".see-all").click(function() {
  if ($( ".comments-container" ).is( ":hidden" )) {
    $('.comments-container').show('slow');
    $('.see_hide').text('Hide Comments');
  } else {
    $('.comments-container').hide();
  }
});

or remove the previous handler:

$( ".see-all" ).off('click'); // Remove all click handlers

var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
  $( ".see-all" ).click(function() {
    $('.comments-container').show('slow');
    $('.see_hide').text('Hide Comments');
  });
} else {
  $( ".see-all" ).click(function() {
    $('.comments-container').hide();
  });
};

Answer 4

When you utilize the on('click', ..) function or its shorthand version click(..), a new handler is attached. This results in multiple handlers being associated with the same object, all of which are triggered. To avoid this, it's best to either set up the handler only once:

// Implement this in global code or code running upon module load
// Just one time!
$(".see-all").click(function() {
  if ($( ".comments-container" ).is( ":hidden" )) {
    $('.comments-container').show('slow');
    $('.see_hide').text('Hide Comments');
  } else {
    $('.comments-container').hide();
  }
});

or remove the previous handler:

$( ".see-all" ).off('click'); // Remove all click handlers

var commentsHidden = $( ".comments-container" ).is( ":hidden" );
if (commentsHidden) {
  $( ".see-all" ).click(function() {
    $('.comments-container').show('slow');
    $('.see_hide').text('Hide Comments');
  });
} else {
  $( ".see-all" ).click(function() {
    $('.comments-container').hide();
  });
};

Answer 5

Answer №3

It is important to ensure that the flag state is checked within the click function(). Otherwise, the click handler will only be bound once during page load.

$( ".see-all" ).click(function() {
    var commentsHidden = $( ".comments-container" ).is( ":hidden" );
    if (commentsHidden) {
        $('.comments-container').show('slow');
        $('.see_hide').text('Hide Comments');
    } else {
         $('.comments-container').hide();
    }
});

Answer 6

It is important to ensure that the flag state is checked within the click function(). Otherwise, the click handler will only be bound once during page load.

$( ".see-all" ).click(function() {
    var commentsHidden = $( ".comments-container" ).is( ":hidden" );
    if (commentsHidden) {
        $('.comments-container').show('slow');
        $('.see_hide').text('Hide Comments');
    } else {
         $('.comments-container').hide();
    }
});

Answer 7

Answer №4

Make a simple adjustment by trying this:

$( ".see-all" ).click(function() {
  var commentsHidden = $( ".comments-container" ).is( ":hidden" );
  if (commentsHidden) {
      $('.comments-container').show('slow');
      $('.see_hide').text('Hide Comments');
    });
  } else {
    $( ".see-all" ).click(function() {
      $('.comments-container').hide();
    });
  }
});

To optimize, ensure the click handler is only bound once and verify if comments are hidden every time the p element is clicked.

Answer 8

Make a simple adjustment by trying this:

$( ".see-all" ).click(function() {
  var commentsHidden = $( ".comments-container" ).is( ":hidden" );
  if (commentsHidden) {
      $('.comments-container').show('slow');
      $('.see_hide').text('Hide Comments');
    });
  } else {
    $( ".see-all" ).click(function() {
      $('.comments-container').hide();
    });
  }
});

To optimize, ensure the click handler is only bound once and verify if comments are hidden every time the p element is clicked.

How come the hidden container does not reappear after I click on it?

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Expanding Lists in Bootstrap 3: A Step-by-Step Guide

Display the most recent information from a MySQL table instantly using jQuery after the data has been updated

Interactive image rotator featuring navigation buttons for next and previous slides

The function screen.getByText is not available in this context

Scrolling automatically within a child element that has a maximum height limit

Multiple onClick events being triggered unexpectedly upon component re-render

Chrome browser on Android devices mistakenly capturing incorrect pageX/pageY values during scrolling

Change the hover effects on the desktop to be more mobile-friendly

Ajax sends the URL location to Python

Is there a way to deliver information to a specific element on a client's HTML page?

Bootstraping Twitter with PHP session starting has become a standard practice in modern

Reduce the length of the text and display it upon hovering with the mouse

Leveraging JSON Data in Highcharts

Passing a Ruby session variable to a JavaScript tag: a step-by-step guide

Spinning text within a circular rotation in CSS

The Express.js feature "app.use() mandates the use of middleware functions"

Recover files from the latest commit in Git, with files having no data inside them

Book of Tales displaying Emotion Styling upon initial load only

Prevent mobile users from entering text with Material UI Autocomplete on keyboard

Failure to retrieve the value in a variable using JsonQuery in Python