Press the button just one time

Hey there! I've got a question for you about the .toggle() function:

Is there a way to make it toggle only once?

I have an event tied to window resize and I want my element to be visible or hidden based on this.

I'm aware that achieving this with media queries and CSS is quite simple (and probably the best option), but I'm curious about how to do it using jQuery.

I attempted to use the .one() method, but couldn't quite grasp how it's supposed to work.

Below is the snippet of my jQuery code:

jQuery(document).ready(changeClass);
jQuery(window).resize(changeClass);

function changeClass() {
   if($(window).width() < 805){
   $('.test').one(toggle());
}

Can you point out what I might be doing wrong?

And in case someone encounters a similar issue in the future, here's the solution using pure CSS:

@media(max-width:805px)
{
   .test{
      display:none;
   }
}

Answer №1

If you want to achieve the same effect using jQuery instead of pure CSS, you can use the following code:

jQuery(window).on('resize load', adjustClass);

function adjustClass() {
    $('.box').toggleClass('hidden', window.matchMedia('(max-width:805px)').matches);
}

-View on jsFiddle-

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retain the previously selected option in a PHP combobox even when changing pages

Can someone please assist me with my PHP code? I am having trouble keeping my combobox unchanged after a page reload. It works fine until I change pages in my pagination. Can anyone help? THIS IS MY PHP. PHP ...

Updating the text of a Mat-Label dynamically without the need to reload the page

In my application, there is a mat-label that shows the Customer End Date. The end date is fetched initially through a GET request to an API. Let's say the end date is 16-05-2099, which is displayed as it is. There is also a delete button implemented f ...

Getting Camera Access with getUserMedia

My HTML code was working fine until I added some additional lines to check if the camera is ready or available for the users. Here is how my HTML looks like: <div id="notes"> </div> <div id="video-container"> <video id="camera-stream" ...

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

Utilizing Angular's ng-model directive in combination with the required

I am attempting to implement a basic input field using html5 "required". The input field utilizes placeholder text, so I want the initial value of the input to be blank. I have connected the input to an ng-model that is set as empty initially to display th ...

XSL For Each Loop Failing to Retrieve Values

I have successfully set up this XML document using XSL and CSS to enhance its appearance. However, I am facing issues with the foreach function as it is not working properly. Can anyone provide any insights or suggestions on what might be going wrong? XML ...

There is a table equipped with two buttons. When using jQuery-ajax, rather than replacing the <tbody> of the <table>, it redirects the browser to the specified ajax URL

I initially simplified my code to troubleshoot, but I now realize I need to show the unsimplified code to pinpoint the issue. I am replacing the HTML and JavaScript with the "full version" and have updated my description with more details. I have a table ...

If I desire to utilize a particular font that I am aware is not readily accessible on the majority of users' computers

Is it possible to embed a specific font into my website if I know it's not commonly available on users' computers? I've seen some websites using unique fonts as text and not images, so I'm curious about how that is achieved. Thank you, ...

Fine-tuning the visual display within the viewing area

Is there a way to retain the curve at the bottom of an image even after setting its background size to 50vh? The current issue is that the curve gets cropped out when the height is set, resulting in a loss of the desired effect. https://i.sstatic.net/r45n ...

Adjust the text color based on the background image or color

Here on this site, I have designed the first div to display a dark image, while the second one shows a light background. I am aiming to adjust the sidebar text color based on whether it is displayed against the dark or light background. How can I achieve ...

What is the best way to connect a relative CSS stylesheet to a master page?

My Java application generates several HTML pages, organized in different directories: html_pages/ | ----> landin_page.html html_pages/details | ----> index1.html html_pages/more_details | ----> index2.html html_pages/css | ...

The alternating colors in the sorting table are not visible due to the divs being hidden with the display set

I've come across a problem that has me stumped. So, there are two sorting filters on a table and one of them hides rows that don't apply, messing up the alternating colors. Take a look at the function that sorts and the CSS below. The issue is pr ...

Switching between nested lists with a button: A simple guide

I have successfully created a nested list with buttons added to each parent <li> element. Here is how the list is structured: $("#pr1").append("<button id='bnt-cat13' class='buttons-filter'>expnd1</button>"); $("#pr ...

Adjust the width of a div element using the transform property to rotate it and modify the

Having an issue with a particular style here. There's a div containing the string "Historic" that has a CSS transform rotate applied to it and is positioned in relation to another sibling div. When I change the string to "Historique" for international ...

Ways to manipulate the content of a div

HTML <span class = "Box"> <div class = "active"> <a href ="#-night"> <span class ="list">4</span> <span class="locations"><?php echo $location; ?></span> <span ...

Aligning items vertically within a container with a constant height

I'm currently working on a website that requires a pixel-based navbar with a height of 80px. The issue I'm facing is the difficulty in vertically centering the ul and li elements. I have experimented with various methods such as using top:50%; ...

Display a div when hovering over it, with its position set from the bottom of the main

I am attempting to use CSS to display another div within my main div, but positioned from the bottom of the main div rather than as a block as I am currently testing with my code. HTML <div id="main"> <a href="#"><img src="https://www.g ...

Crafting numerous CSS templates

I am currently working on creating multiple boxes or templates (5 on each row) from a movie API. I have successfully retrieved all the necessary data and do not require a responsive design. https://i.sstatic.net/CNz9R.png The issue arises when I attempt ...

Transform <td> tags into an array using Javascript

I am aiming to create an array and then add some data using the .unshift method. Is it possible to have an array that only contains td elements, created with JavaScript rather than jQuery? Below is a snippet of my table: <table id="scorestable"> ...

Placing an icon directly beside two paragraphs, ensuring it is vertically centered and positioned to the right of the text

I am looking to add an icon next to two paragraphs that will be positioned exactly in the center (vertically) on the left side of the paragraphs. Here is the desired outcome: https://i.sstatic.net/RmjOR.png Currently, here is what I have: https://i.ssta ...