Button with CSS accordion menu

Seeking assistance as I am new to web design and experiencing an issue with my accordion button. I am trying to implement an animation that will display my <ul> when clicking within the .container element. The animation works fine, but I am having trouble manipulating the CSS to change the display property from block to none.

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}
<html>

<head>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>
  <script>
    var acc = document.getElementsByClassName("container");
    acc.onclick = function() {
      var panel = getElementsByClassName("links");
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>

</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul class="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

javascriptjqueryhtmlcss

Answer №1

I personally prefer the jQuery syntax over other frameworks.

Hopefully, this code snippet will be helpful for you:

$('.container').click(function(){
      var panel = $('#links');

      if (panel.css('display') === "block") {
        panel.css('display',"none");
      } else {
        panel.css('display',"block");
      }
})
.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script>
<html>

<head>

  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>
</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul class="links" id="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

Answer №2

Here is a helpful solution:

.container {
  display: inline-block;
  cursor: pointer;
}

.bar1,
.bar2,
.bar3 {
  width: 35px;
  height: 5px;
  background-color: #000000;
  margin: 6px 0;
  transition: 0.4s;
}

.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px);
  -moz-transform: rotate(-45deg) translate(-9px, 6px);
  transform: rotate(-45deg) translate(-9px, 6px);
}

.change .bar2 {
  opacity: 0;
}

.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px);
  -moz-transform: rotate(45deg) translate(-8px, -8px);
  transform: rotate(45deg) translate(-8px, -8px);
}

.links {
  float: left;
  margin-left: 15%;
  display: none;
}
<html>

<head>


  <script>
    var acc = document.getElementsByClassName("container");
     function myFunction(x) {
       x.classList.toggle("change");
      var panel = document.getElementById("links");
      console.log(panel.style.display);
      if (panel.style.display === "block") {
        panel.style.display = "none";
      } else {
        panel.style.display = "block";
      }
    }
  </script>

</head>

<body>
  <div class="container" onclick="myFunction(this)">
    <ul id="links" class="links">
      <li><a href="#skills"><span>Skills</span></a></li>
      <li><a href="#about"><span>About</span></a></li>
      <li> <a href="#contact"><span>Contact</span></a></li>
    </ul>
    <div class="bar1"></div>
    <div class="bar2"></div>
    <div class="bar3"></div>
  </div>
</body>

</html>

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

Utilizing the method slidedown() to reveal a recently added element

I am currently working on creating a fieldset that will add a file input field to a div and simultaneously use the slidedown() function to display the newly added field. The code I have so far is functional, but I am struggling to incorporate the slidedo ...

jqueryforms

Is it possible for jQuery to automatically update the "username" field using the data from the "name" field?

Currently, I am trying to create a form with two input fields: "name" and "username". The concept is that the value entered into the "name" field should dynamically update the "username" field. Additionally, the username must be in lowercase and spaces sh ...

jquerykeydownonkeypressonkeyup

Tips for extracting data from a website with a heavy reliance on JavaScript

My goal is to create a database containing information about the participants of the 2016 New York Marathon (). The website in question heavily relies on javascript and requires manual clicking on each runner's "Expand results" button to view their de ...

javascriptpythonselenium-webdriverweb-scraping

A numerical input field that removes non-numeric characters without removing existing numbers?

Currently, I have implemented the following code: <input type="text" onkeyup="this.value = this.value.replace(/\D/g, '')"> This code restricts users from entering anything other than numbers into a field on my webpage. However, I hav ...

javascriptjqueryhtml

I'm looking to redirect a 404 page in my PHP code - where is the best place to do so?

I found the correct code for redirecting 404 errors when a page is not found during redirection. However, I am unsure of where to implement this code in my PHP file. Should I place it within a specific tag on my home page? When I tried placing it at the ...

phphtmlhttp-status-code-404

Issue with Material-UI Autocomplete: OnChange function causing interference with other functionalities

Handling the Autocomplete component has been a challenge for me, this is my current code snippet: <Autocomplete multiple id="checkboxes-tags-demo" options={ownerOptions2} disableCloseOnSelect filterSelectedOptio ...

javascriptreactjsmaterial-uionchange

Navigating through a list using tabs and automatic scrolling to a specific index in React with Material UI's Scrollspy

If there was a vast array of items, each belonging to a specific category, const categories: string[] = [0, 1, 2, 3, 4, 5]; const items: {name: string, category: number}[] = [{name: "foo", category: 1}, {name: "bar", category: 1}, {name ...

javascriptreactjstypescripttabsmaterial-ui

Issue with extra spacing within a div element in Bootstrap 5

Why is there extra spacing on the right side of my div? The image and text are supposed to take up 50% of the screen each. However, for some reason, there is additional spacing on the right that prevents this from happening. I am using Bootstrap 5. Click ...

htmlcssbootstrap-5

The Node.js application is unable to locate the source file path

Currently, I am in the process of creating a simple quiz application. While working on this project, I encountered an issue with linking a JS file in an HTML template. Even though I have confirmed that the path is correct, every time I run my node app, the ...

javascripthtmlnode.jsmongodbexpress

Ways to run a template multiple times within a single handler function

I'm working on implementing a progress bar that dynamically updates based on the progression of a command line argument within my Go code. I've been using a template to update the progress value every second by calling template.Execute(w, data) i ...

htmlgobootstrap-4

The x-axis in c3.js is experiencing issues with plotting when there is interval data in DST time

Trying to create a graph using the c3.js library with an x-axis interval of time. The intervals are determined by selecting a date range in the date picker. For example, if we select the dates 2016-03-13 00:00 to 2016-03-13 04:00, we add 15 minutes to ...

javascriptangularjsd3.jsc3.js

Ways to pass JavaScript variables to a Python script

Hey there! I'm currently facing an issue with retrieving variables from JS to use in my python code. Despite trying methods like AJAX and JQuery, I haven't had much success yet. It's possible that I'm missing something crucial in the pr ...

javascriptpythonajaxgeolocation

Is it possible to design an HTML file that enables users to change themes seamlessly with just HTML and CSS?

Is it possible to create a document that allows switching themes using HTML and CSS without JavaScript? I have created a simple HTML document: <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <style ...

htmlcsscss-selectorscss-variables

What is the best way to unselect a checkbox that is already checked on an HTML page using AngularJS?

I've created checkboxes in my HTML code like this: <div ng-repeat="fruit in fruits"> <input type="checkbox" name="{{fruit.name}} ng-model="fruit.value" ng-checked="isChecked(fruit)" ng-change="changed(fruit)" ng-required="true" ...

javascriptjqueryhtmlangularjscheckbox

The absence of reactivity is evident when working with composition-api and nuxt3

I've got a Nuxt code snippet that is functioning correctly: <template lang="pug"> div {{ isActive }} !-- Reactivity is working fine, isActive switches from false to true --! </template> <script> export default { data() ...

javascriptvue.jsnuxt.jsvuejs3nuxt3.js

Using functions like .map in a TypeScript model may not function properly

After retrieving data from a server, I created a TypeScript model to structure the incoming data as follows: export class DataModel{ public PageNo: number public showFromDate: string public showToDate: string public gradeFieldId: number } ...

javascriptreactjstypescript

Space between the top of the page and the first divs on the page is essential for optimal

Check out this example of HTML code: <style type="text/css> .column { float: left; width:33.3%; } #container { text-align: center; width:100%; } .clearfix { display: inline-block; } </style> <div id="container" class="clearfix"> ...

csshtmlgaps-in-visuals

Changing the content of the initial post in a loop on WordPress

<?php $freeadvice=new WP_Query('category_name=freeadvice&showposts=10'); while($freeadvice->have_posts() ): $freeadvice->the_post(); ?> <li class="event"> <input type="radio" name="tl-group" /> ...

javascriptphpwordpress

Is there a way to retrieve the filename of a file uploaded using a shiny fileInput function?

This shiny app has a feature where users land on the 'Upload data' panel upon launching. To restrict access to the other two 'tabpanels', users must first upload both necessary files in the 'Upload data' tab. The condition for ...

javascripthtmlcssrshiny

Navigating a list using AngularJS within an HTML view: tips and tricks!

Implementing AngularJS within the context of the Ionic framework. The $scope on the front-end consists of: an object User that contains a list of sports: $scope.user = { sports: { "running": true, "football": true } } a list named "matches" containing u ...

javascriptangularjs