CODEWITHSUNDEEP
javascriptjquery
Donovan Rucastle
Donovan Rucastle

Reputation: 37

Simple .hide Jquery script

I am trying to get my button to hide a ul element but nothing seems to be working. The test alert works just fine but the hide event does not. I have checked that the CSS selector is correct.

Here is my current script: 

jQuery(function($) {
  $(document).ready(function() {
    $(".trigger").on("click", function() {
      event.preventDefault();
      $(".b3_archive_testimonial_category_list").hide();
      alert("HI");
    });
  });
});

Had to format it weirdly to get it to fit the code element on StackOverflow...

Image of the element to hide

Any ideas?

Upvotes: 0

Views: 81

Answers (5)

Prakash Patil
Prakash Patil

Reputation: 463

Based on your question here is the answer. You must include jquery library file to run your code. 

jQuery(function($) {
  $(document).ready(function() {
    $(".trigger").on("click", function() {
      event.preventDefault();
      $(".b3_archive_testimonial_category_list").hide();
      alert("HI");
    });
  });
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
</head>
<body>


<button type="button" class="trigger">Click</button>

<ul class='b3_archive_testimonial_category_list'>
  <li>Home</li>
  <li>About</li>
  <li>Contact</li>
</ul>

</body>
</html>

Upvotes: 0

Donovan Rucastle
Donovan Rucastle

Reputation: 37

Found the answer based on a few of your responses.

The main issue seemed to be with too many CSS classes or just the fact that I was targeting a ul CSS class. I have enclosed it in a div and made the div show and hide. This seems to work the best.

Secondly, the responses stating I have not passed the event function were correct: 

$(".trigger").on("click", function(event) {...}

My current code looks like this: 

jQuery(document).ready(function() {
jQuery('.dropdown').hide();
jQuery('.trigger').click(function(e){
e.preventDefault();jQuery(".dropdown").slideToggle();
jQuery('.trigger').toggleClass('opened closed');
});
});

Thanks for everyone's help!

Upvotes: 0

JIJOMON K.A
JIJOMON K.A

Reputation: 1280

You can use jquery toggle() to hide and show the items on a element click event.

$(".trigger").on("click", function(event) {
  event.preventDefault();
  $(".b3_archive_testimonial_category_list").toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a href='#' class='trigger'>Trigger</a>
<ul class='b3_archive_testimonial_category_list'>
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>

Upvotes: 0

zer00ne
zer00ne

Reputation: 43895

Assuming that .trigger is an <a> tag, which is the reason why event.preventDefault() is used. In this context, using this event method will keep the page from jumping when a link is clicked.

  • If that is in fact the reason, pass the event Object:

    $(".trigger").on("click", function(event) {...

  • If .trigger isn't an <a> tag, remove event.preventDefault().

Also, unwrap this:

jQuery(function($) {...});

it's unnecessary.

Demo

$(".trigger").on("click", function(event) {
  event.preventDefault();
  $(".b3_archive_testimonial_category_list").hide();
});
<a href='#' class='trigger'>Trigger</a>
<ul class='b3_archive_testimonial_category_list'>
  <li>Item 1</li>
  <li>Item 1</li>
  <li>Item 1</li>
</ul>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Upvotes: 1

Jack Bashford
Jack Bashford

Reputation: 44107

You need to include the event parameter in the function:

$(".trigger").on("click", function(event) {...}

Now your code should work.

Upvotes: 0

Related Questions