Category: jQuery

Sometimes, we want to toggle show or hide on click with jQuery.

In this article, we’ll look at how to toggle show or hide on click with jQuery.

Toggle Show or Hide on Click with jQuery

To toggle show or hide on click with jQuery, we can use the toggle method in the click handler of the toggle button.

For instance, we write:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>

<button>
  toggle
</button>

<div>
  hello world
</div>

to add a toggle button and a div to toggle on and off.

Then we write:

$("button").click(() => {
  $('div').toggle("slide", {
    direction: "right"
  }, 1000);
});

to get the button with $ and add a click event handler to it with click.

In the click handler, we get the div with $.

And we call toggle on it with the effect to apply when toggling and an object to set the direction of the slide.

The 3rd argument is the number of milliseconds to show the transition effect when sliding.

Now when we click toggle, we should see ‘hello world’ being slid right and left when toggling off and on respectively.

Conclusion

To toggle show or hide on click with jQuery, we can use the toggle method in the click handler of the toggle button.

Sometimes, we want to trigger an event when clicking outside the element with jQuery.

In this article, we’ll look at how to trigger an event when clicking outside the element with jQuery.

Trigger Event When Clicking Outside an Element with jQuery

To trigger an event when clicking outside the element with jQuery, we can listen to the click event on the html element.

Then in the event handler, we can check which element is clicked.

For instance, we write:

<div id='your-div-id'>
  hello world
</div>

to add a div and we want to detect whether we clicked outside of it.

Then we write:

$('html').click((e) => {
  if (e.target.id !== 'your-div-id' && $(e.target).parents('#your-div-id').length === 0) {
    console.log('clicked outside')
  }
});

to select the html element with $('html').

Then we call click on it with the click event listener.

We get the element we clicked on with the e.target property.

So if its id isn’t 'your-div-id' and its parent elements also don’t contain the div with ID your-div-id as returned by the parents method, then we know we clicked outside the div with ID your-div-id.

Therefore, when we click outside the div we added, we see 'clicked outside' logged in the console.

Conclusion

To trigger an event when clicking outside the element with jQuery, we can listen to the click event on the html element.

Then in the event handler, we can check which element is clicked.

Sometimes, we want to format dates in jQuery datetimepicker.

In this article, we’ll look at how to format dates in jQuery datetimepicker.

Format Dates in jQuery datetimepicker

To format dates in jQuery datetimepicker, we can set the format property in the object that we pass into the datetimepicker method.

For instance, we write:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.full.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-datetimepicker/2.5.20/jquery.datetimepicker.css" />

<input id="timePicker">

to add the script and link tags for jQuery and jQuery datetimepicker.

Then we add the input element we use for the date time picker.

Next, we write:

$('#timePicker').datetimepicker({
  format: 'd-m-Y',
  minDate: new Date()
});

to select the input element with $.

And then we call datetimepicker on that with an object that sets the format property to 'd-m-Y' so that the selected date with show in DD-MM-YYYY format in the input.

Conclusion

To format dates in jQuery datetimepicker, we can set the format property in the object that we pass into the datetimepicker method.

Sometimes, we want to select all elements but the first element with the given selector with jQuery.

In this article, we’ll look at how to select all elements but the first element with the given selector with jQuery.

Select All Elements But the First Element with the Given Selector with jQuery

To select all elements but the first element with the given selector with jQuery, we can call the slice method with 1 to return all the elements but the first one that’s selected.

For instance, if we have:

<div>
  foo
</div>
<div>
  bar
</div>
<div>
  baz
</div>

and we want to get all the divs but the first, we write:

const els = [...$('div').slice(1)];
console.log(els)

We call $('div') to select all the divs.

Then we call slice(1) to return all the selected divs except the first one.

Finally, we use the spread operator to spread the object with the selected elements into an array.

Therefore, els is an array with the 2nd and 3rd div according to the console log.

Conclusion

To select all elements but the first element with the given selector with jQuery, we can call the slice method with 1 to return all the elements but the first one that’s selected.

Sometimes, we want to disable links to stop double-clicks in jQuery.

In this article, we’ll look at how to disable links to stop double-clicks in jQuery.

Disable Links to Stop Double-Clicks in jQuery

To disable links to stop double-clicks in jQuery, we can add an attribute to the elements we want to disable after 1 click.

Then we can return false is those elements are clicked again.

For instance, if we have:

<a class='button' href='#'>foo</a>
<a class='button' href='#'>bar</a>

Then we write:

$("a.button").click(function() {
  $(this).attr("disabled", "disabled");
});
$(document).click(function(evt) {
  if ($(evt.target).is("a[disabled]"))
    return false;
});

We select the a elements with class button with $("a.button").

Then we call click to add a click event listener that adds the disabled attribute to them if they’re clicked.

Next, we add a click listener to document.

In the click listener, if the element is an a element with the disabled attribute, we return false so nothing is done.

Conclusion

To disable links to stop double-clicks in jQuery, we can add an attribute to the elements we want to disable after 1 click.

Then we can return false is those elements are clicked again.