tapping on the division and sliding it to and fro

I am trying to achieve a functionality where clicking a div will move another div to the right by 0, and on clicking the div again, the second div will move to the right by -200. However, I am facing issues getting it to work properly.

$(document).ready(function(){
    $('#menu').click(function(){
        if ($('#menudrop').css('right', '-200px'));
            $('#menudrop').css('right', '0px');
        else{
            $('#menudrop').css('right', '-9999px');
        };
    });
});

https://jsfiddle.net/theUnderdog/woc6o12b/1/

Answer №1

If the condition is incorrect, you can use

$('#menudrop').css('right') == '-200px')
.

$(document).ready(function() {
  $('#menu').click(function() {
    if ($('#menudrop').css('right') == '-200px')
      $('#menudrop').css('right', '0px');
    else {
      $('#menudrop').css('right', '-200px');
    };
  });
});

DEMO

Answer №2

Here is a more simplified version:

$(document).ready(function() {
  $('#menu').click(function(){
    $('#menudrop').css('right', 
       $('#menudrop').css('right') == '-200px' ?  '0px' : '-200px');
  });
});

For an example, visit this link: https://jsfiddle.net/DinoMyte/woc6o12b/4/

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

Tips on customizing KendoUI-Dialog titlebar using CSS for a single component

I am struggling with styling the KENDO UI dialog in a unique way: Imagine I have a component named WatComponent. Inside this component, When the user clicks the "Forbidden" button, my goal is to make a warning styled dialog appear, with a yellow/orange ...

Looking for jQuery bbq... is the grill fired up yet?

In my exploration of the jQuery bbq plugin, I noticed that there is no reference to document.hash in the code. I believe that the function for retrieving the hash is located at line 1094: function get_fragment( url ) { url = url || location.href; ...

Embracing right-to-left (RTL) languages

I am looking to create a website that can support both left-to-right (LTR) and right-to-left (RTL) languages seamlessly. My goal is to have the text direction switch automatically to RTL if the content is in an RTL language. Additionally, I want the input ...

"Enhance your Angular application with Datatables using $http to fetch and display data

Currently, I'm working on a project with AngularJS where I'm fetching data from the server using the $http service. Here's a snippet of the code: $http({ method: 'GET', url: $rootScope.apiURL + 'getAllClientLocations/ ...

Two divs positioned on the left side and one div positioned on the right side

Hey there, I am attempting to align 2 divs on the left side with one div on the right. #div1 #div2 #div1 #div2 #div3 #div2 #div3 #div3 The challenge is to have #div2 positioned between #div1 and #div3 when the browser window is resized smaller. Currentl ...

Encountering a Route Not Found Error on Heroku with Node and Express Deployment

Once I deployed my app to Heroku, it started having trouble finding the API path that was set up in Express. The code runs perfectly fine on my local machine, but on Heroku, I keep getting a 404 - Page Not Found error. This is how the router is set up: c ...

Chrome's behavior of reducing the width of inline elements when the content is dynamic

Upon opening the specified URL in Google Chrome, an issue can be observed where on the initial load everything appears fine. However, upon refreshing, the width of the three items at the top (Bedingungen, Preise, and So geht's) collapse. This seems to ...

Implementing Fullpage.js with persistent elements throughout slides

Can I keep certain elements fixed between slides? I found that the only way to accomplish this was by placing the text element outside of the slide div. <div class="section" id="section1"> <div class="intro"> <h1> ...

In Firefox, right floated elements vanish when utilizing columns

Utilizing the ol element with column-count and column-gap properties to organize the list into 2 columns, each list item contains a span element floated right. However, I am encountering an issue where the span element is not displayed for certain items li ...

The HTML content is not responsive to varying screen sizes

Currently, I am in the process of developing a Wordpress page using WPBakery Page Builder. To enhance the design, I extracted some HTML/CSS code from an existing page by using SnappySnippet and pasted it into the new page within a "Pure html" block. Howeve ...

What is the best way to send multiple variables to a url using jQuery ajax?

I am having trouble passing multiple values in the method below. Can someone help me with the correct syntax? I have attempted data: ('keyword='+$(this).val(),'id='10), as well as data: {'keyword='+$(this).val(),'id=&a ...

Conceal the div when the horizontal scroll position of the container is at 0

Struggling with a JavaScript issue in a fluid width page that involves scrolling a div using navigation buttons. I am new to JavaScript and trying to use scrollLeft = 0 to hide the leftmost nav button if there's nothing to scroll, and to show the div ...

How to format numbers in JavaScript post calculations

Struggling to find a solution to format calculation results with commas for thousand separators (e.g., 10,000). After implementing the .toLocaleString('en-US', {maximumFractionDigits:1}); method to format numbers in the output, I encountered unex ...

Issue with border rendering on triangles in CSS on IE8

I currently have a horizontal navigation bar with triangle borders inserted using :before and :after for each list item. This creates the illusion of a white bordered point on the right side of each list item. The issue I'm facing is that this design ...

What is the best way to transform SASS into CSS?

Looking for an online tool to easily convert a few lines of SASS into pure CSS. Despite searching on Google, all the links I found talk about converting CSS to SASS. Below are the specific lines I need assistance in converting to CSS: =text-shadow($color ...

Is it possible to display a combination of images and text data using JQUERY/AJAX, when the data is sent as objects or arrays?

I'm struggling to figure out how to handle an object or array sent from a server that contains binary picture and text data using JQUERY/AJAX Here is the server-side setup: const url= require('url'), express = require('express&ap ...

Unable to Preview jQuery Video in Div After PHP Validation, But Image Preview Works Fine

Successfully utilizing the code below (with variations in IDs, etc.), I am able to preview a banner image in a div after PHP validates the upload using AJAX. This process is working perfectly without any issues. However, I am encountering an issue when at ...

Error code 8070000c is specific to Uploadify and can only be encountered when using the

Encountered an issue with jQuery uploadify - receiving error message: SCRIPT16389: Could not complete the operation due to error 8070000c. jquery.uploadify.v2.1.4.js, line 292 character 5 This error occurs on the second attempt when using IE browser. Any ...

Obtain the dimensions of an element using the method `Sys

Recently, I have been working on an asp.net 4.0 web application where I encountered a challenge while trying to retrieve the bounds of a panel using Sys.UI.DomElement.getBounds method. My approach involved utilizing JQuery with the following code snippets: ...

Making poll everywhere items align horizontally using HTML: a step-by-step guide

Is there a way to display two different Poll Everywhere polls side by side on a Blackboard course, rather than having them stacked on top of each other? I have the embed codes for both polls ready to go. ...