Utilizing JQuery's .Toggle function in conjunction with a stylish CSS transform button

I am trying to create a toggle menu that shows and hides itself without requiring the button to be clicked twice. I have added e.preventDefault(); which solves the issue, but now the button does not transform as intended.

$(document).ready(function() {
  $(".spinner-master2").click(function() {
    $(".slideme").toggle("slow", function() {});
  });
});
.slideme {
  background-color: rgba(183, 221, 240, 0.88);
  width: 100%;
  height: 150px;
  display: none;
}
.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master2 {
  position: fixed;
  top: 100px;
  left: 50%;
  margin: 0px auto;
  height: 50px;
  width: 50px;
}
.spinner-master2 input[type=checkbox] {
  display: none;
}
.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
}
.spinner-master2 .spinner2 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}
.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {
  opacity: 0;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="image"></div>
<div id="logo">js moody</div>

<div class="slideme">

</div>

<div id="menu" class="spinner-master2">
  <input type="checkbox" id="spinner-form2" />
  <label for="spinner-form2" class="spinner-spin2">
    <div class="spinner2 diagonal part-1"></div>
    <div class="spinner2 horizontal"></div>
    <div class="spinner2 diagonal part-2"></div>
  </label>
</div>

javascriptjqueryhtmlcss

Answer №1

Here is the code snippet for you:

$(document).ready(function() {
  $("#spinner-form2").change(function() {
    $(".slideme").toggle("open");
  });


});
.slideme {
  background-color: rgba(183, 221, 240, 0.88);
  width: 100%;
  height: 150px;
  display:none;
}
.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master2 {
  position: fixed;
  top: 100px;
  left: 50%;
  margin: 0px auto;
  height: 50px;
  width: 50px;
}
.spinner-master2 input[type=checkbox] {
  display: none;
}
.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
}
.spinner-master2 .spinner2 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}
.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .horizontal {
  opacity: 0;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
.spinner-master2 input[type=checkbox]:checked ~ .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -16px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<body>
  <div id="image"></div>
  <div id="logo">js moody</div>

  <div class="slideme">

  </div>

  <div id="menu" class="spinner-master2">
    <input type="checkbox" id="spinner-form2" />
    <label for="spinner-form2" class="spinner-spin2">
      <div class="spinner2 diagonal part-1"></div>
      <div class="spinner2 horizontal"></div>
      <div class="spinner2 diagonal part-2"></div>
    </label>
  </div>

</body>

</html>

Answer №2

By reordering your code slightly, it is possible to achieve this effect without the need for any JavaScript.

I have relocated the checkbox element to the beginning of the code and adjusted the CSS logic accordingly to accommodate the new placement.

Take a look at the updated code snippet below:

#spinner-form2 {
  display: none;
}
.slideme {
  background-color: rgba(183, 221, 240, 0.88);
  width: 100%;
  height: 150px;
  opacity: 0;
  transform-origin: 0 0;
  transform: scale(0);
  transition: all 400ms;
}
.spinner-master2 * {
  transition: all 0.3s;
  -webkit-transition: all 0.3s;
  box-sizing: border-box;
}
.spinner-master2 {
  position: fixed;
  top: 100px;
  left: 50%;
  margin: 0px auto;
  height: 50px;
  width: 50px;
}
.spinner-master2 label {
  cursor: pointer;
  position: absolute;
  z-index: 99;
  height: 100%;
  width: 100%;
  top: 0px;
  left: 0;
}
.spinner-master2 .spinner2 {
  position: absolute;
  height: 5px;
  width: 100%;
  background-color: #000;
}
.spinner-master2 .diagonal.part-1 {
  position: relative;
  float: left;
}
.spinner-master2 .horizontal {
  position: relative;
  float: left;
  margin-top: 7px;
}
.spinner-master2 .diagonal.part-2 {
  position: relative;
  float: left;
  margin-top: 6px;
}
/* when #spinner-form2 is checked */

#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .horizontal {
  opacity: 0;
}
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .diagonal.part-1 {
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
  margin-top: 10px;
}
#spinner-form2[type=checkbox]:checked ~ .spinner-master2 > .spinner-spin2 > .diagonal.part-2 {
  transform: rotate(-135deg);
  -webkit-transform: rotate(-135deg);
  margin-top: -16px;
}
#spinner-form2[type=checkbox]:checked ~ .slideme {
  transform: scale(1);
  opacity: 1;
}
<input type="checkbox" id="spinner-form2" />

<div id="image"></div>
<div id="logo">js moody</div>

<div class="slideme"></div>

<div id="menu" class="spinner-master2">
  <label for="spinner-form2" class="spinner-spin2">
    <div class="spinner2 diagonal part-1"></div>
    <div class="spinner2 horizontal"></div>
    <div class="spinner2 diagonal part-2"></div>
  </label>
</div>

I trust this adjustment proves beneficial in achieving your desired outcome.

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

Encountering an error when accessing dynamically routed pages in Next JS

When I click on a link within the web app to navigate to a dynamically routed page for a product (http://localhost/1), everything works as intended. However, if I manually input a specific product number in the search bar to navigate directly to that page ...

javascriptnext.js

Tips for creating a plug-in plugin and applying the necessary parameters

(function( $ ){ var functions = { init : function( options ) { var settings = $.extend({ //Declaring default settings that can be overridden in the plugin call code: 7, listHe ...

javascriptjqueryjquery-plugins

The execution of the function halts as soon as the player emerges victorious

In my attempt to create a basic game where players compete to click their designated button faster to reach 100%, I am in need of assistance with implementing a logic that determines the winner once one player reaches or exceeds 100. Essentially, I want ...

javascripthtml

Selecting an option from the knockout dropdown menu

I implemented a language dropdown in layout.chtml using knockout js. <select id="Language" class="styled-select" data-bind="value: Language,options: locale, value: selectedLocale, optionsText: 'name'"></select> var viewModel = th ...

javascriptjqueryajaxasp.net-mvcknockout.js

strange occurrences of bootstrap.min.css.map popping up

While working on my e-commerce website using Node, Express, Mongoose, and Bootstrap, I encountered an unexpected issue related to "bootstrap.min.css.map". The error 'Cast to ObjectId failed for value "bootstrap.min.css.map" at path "_id" for model " ...

htmlcssnode.jsexpressbootstrap-4

Creating a custom math formula using a combination of Javascript and PHP

Is it possible to apply a math formula from another variable or database? var x = 7; var formula = '+'; var y = 10; By this, I mean that the variables should output = 17 (7 + 10); How can we implement this formula using Javascript or PHP? ...

javascriptphpmathformula

Form-select failing to transmit data

There seems to be an issue with one specific HTML field not sending data. This is my HTML code: <form id="login_registro_form" role="form" method="post" action="./controllers/register.php"> <div cl ...

phphtmljqueryformsbootstrap-5

CSS - stacking containers vertically with scrollbars

I am in need of a vertical stack of blocks, which may include scrolls, contained within a fixed-sized container without scrolls. The number of visible blocks is dynamically managed by JavaScript code. Some blocks can be hidden or shown, and when a block is ...

htmlcss

Sails.js seems to be malfunctioning, as it does not seem to be recognizing the term 'sails'

It seems like I'm encountering an issue with the 'sails' command not being recognized on my Windows 10 system. Despite following all the installation steps, including globally installing Sails.js through npm and ensuring Node is installed, I ...

javascriptnode.jsnpmpackagesails.js

Implementing Click-Activated Scroll-to-Div Feature in React

I need to implement a scroll-to-div feature in my React App. However, the current structure of my app is preventing me from passing refs as props correctly, making it challenging to utilize ref.current.scrollIntoView(). The layout of my code looks like th ...

javascriptreactjsreact-router

Incorporate a generic type into a React Functional Component

I have developed the following component: import { FC } from "react"; export interface Option<T> { value: T; label: string; } interface TestComponentProps { name: string; options: Option<string>[]; value: string; onChang ...

javascriptreactjstypescript

Utilizing the information within the <a> tag to assign the class attribute for the li element using jQuery

I am struggling with a basic drop-down menu: <ul id="nav" > <li><a href='/'>Parent One</a> <ul> <li><a href='/'>child</a></li> <li><a href='/'>child</a>& ...

jquerydrop-down-menumenu

The perplexing configuration of a webpack/ES6 project

I am currently in the process of setting up my very first ES6 and webpack "application" where I aim to utilize classes and modules. However, each time I attempt to transpile the application using the webpack command, I encounter the following error: $ web ...

javascriptnpmwebpackecmascript-6es6-class

What is the most effective approach to building this function in React JS rather than the existing .map method?

Hello, I'm fairly new to all of this so please bear with me. I've been working on developing a search function for my app, but I've encountered a problem. The search function in my header component is being rendered like this in my index: &l ...

javascriptnode.jsreactjsmongodbnext.js

Is there a variation in HTML/XHTML/XML code based on different geographic regions?

I have a question regarding the consistency of HTML, XHTML, and XML code across different localizations. If I write code on a system using the "en-us" localization, will it remain the same when rendered on a system with the "sv-SE" localization? For examp ...

.nethtmlxmlxhtmllocalization

Creating a promise to write data to a file

When executing the function, it creates a series of files but fails to write data to them. Strangely, omitting Promise.all at the end and not resolving the function actually results in the data being written to the files. It's puzzling that no matter ...

javascriptnode.jses6-promisefs

Using Python Flask: Passing a Python list of data elements to Jquery's "Lists": [{ [] }]

Seeking assistance in passing a Python List Result to a Jquery List. Can anyone provide the necessary code to integrate jinja templates into Jquery for iterating through the List values? Python Flask Code:- @app.route('/mapcolumns_link',methods ...

pythonjquery

Using `v-if` with a Vuex getter

Currently, I am utilizing a vuex getters called isLoggedIn to verify whether a user is logged in or not. <div v-if="isLoggedIn" class="ml-2 py-2 group relative">...</div> data() { return { isLoggedIn: this.$store. ...

javascriptvue.jsvuex

Struggling to locate the correct path for the CSS file in Express and Handlebars

As part of a student exercise, I am attempting to access an API containing information about presidents and style them using CSS. However, I am facing issues with linking the style.css file. I have tried various methods to change the path and public path ...

cssnode.jsexpress

Caution: It is not possible to make updates on a component while inside the function body of another component, specifically in TouchableOpacity

I encountered this issue: Warning: Trying to update a component from within the function body of another component. Any suggestions on how to resolve this? Interestingly, the error disappears when I remove the touchable opacity element. ...

javascriptreactjsreact-hooksreact-native