Jquery button triggers on any click event on whole page

Question

This is probably a very simple question.

here's my code.

$( document.body ).click(function () {
  if ( $( ".more" ).first().is( ":hidden" ) ) {
    $( ".compleatelist" ).slideDown( 6000 );
  } else {
    $( ".compleatelist" ).hide();
  }
});

• I'm trying to create a "read more" button that slides down to reveal more info.
• The button class is called more.
• the hidden text class is called compleatelist.

However, the button triggers when I click on ANY click event in the whole page not my ".more" button?

What am I missing here?

Answer 1

$( document.body ).click() <-- This means you are firing click on all clicks on the document body

You probably want

$(".more").click(function(e){
    // $(this)  <-- this is the element you just clicked on
});

This will only fire an event when an element containing the more class is clicked.