Can you show me how to reposition the button alongside the sidebar?

Currently working on a college project centered around developing a personal website and I could use some assistance with aligning the Button to move along with the sidebar.

When clicking on the hamburger menu, the sidebar shifts to the right, and then back if clicked again triggering the toggling of the active class. My issue lies in getting my introductory accordion and its descriptive text to flow consistently with the movement of the sidebar.

This topic is relatively new to me, and my goal is to achieve a high grade for this project. As shown, I've dedicated time to planning out the page layout and design.

I've experimented with various positioning methods to prevent interference with the active sidebar display, but none seem satisfying enough.

javascripthtmlcss

Answer №1

To reposition the accordion content and button to their original location, as well as toggle the active class accordingly, you'll need to reset the left property for both elements and include a rule that overrides this when they are marked as active. Also, I've included a transition for smooth movement.

function show() {
  document.getElementById('sidebar').classList.toggle('active');
  document.querySelector(".accordion__button").classList.toggle('active');
  document.querySelector(".accordion__content").classList.toggle('active');
  
}
document.querySelectorAll('.accordion__button').forEach(button => {
  button.addEventListener('click', () => {
    const accordionContent = button.nextElementSibling;
    button.classList.toggle('accordion__button--active');
    if (button.classList.contains('accordion__button--active')) {
      accordionContent.style.maxHeight = accordionContent.scrollHeight + 'px';

    } else {
      accordionContent.style.maxHeight = 0;
    }
  })
})
#rcorners1 {
  border-radius: 25px;
  background: #222222;
  padding: 20px;
  width: 150px;
  height: 100px;
}

a:link,
a:visited {
  background-color: #222222;
  color: white;
  padding: 20px 25px;
  text-align: center;
  text-decoration: none;
}

...
...
<html>
<title>Website personal</title>

<head>
  <link rel="stylesheet" type="text/css" href="talent.css" />
</head>



...
...

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

Display PickerIOS when a button is clicked in a React Native application

I am a beginner with the react framework and I'm trying to implement a PickerIOS component on button click. However, I'm having trouble understanding how to call other classes upon an event. I found this code snippet on the React Native site: v ...

javascriptjqueryreactjsreact-native

Selecting the next element in the DOM using Javascript

Here is the structure of my current setup: <div class="wrapper"> <div class="first"> <a class="button" href="">click</a> </div> <div class="second"> <div class="third"> S ...

javascripthtmlcsscoffeescriptanimated

The concept of a callback function is not applicable within the context of MongoDB in Node.js

I am encountering an issue while validating the existence of an email or username in my MongoDB users collection within Node.js using my User Model. Whenever I attempt to perform this validation, I receive an error stating callback is not a function. This ...

javascriptnode.jsmongodb

Send attributes to BoundField.as_widget() in Django

Is it possible to pass HTML attributes using BoundField.as_widget() by specifying them in the attrs parameter? According to the Django documentation, this method works as follows: BoundField.as_widget(widget=None, attrs=None, only_initial=False)¶ This fu ...

pythonhtmldjango

Locate the upper and lower limits within an array

I'm currently working on extracting the upper and lower boundaries for a numeric value within an array. const boundaries = [15, 30, 45, 60, 75, 90]; const age = 22; In the given example, the expected result would be: [15, 30] If the value matches ...

javascriptarrays

Utilizing AngularJS to implement checkbox selection within a table

I'm working on a method that will receive an Id from a table when a checkbox is checked and update the $scope.selected array in my Angular controller. If the checkbox is unchecked, it should remove the corresponding item from $scope.selected. Here&ap ...

javascriptangularjsangularjs-scope

"I recently started using Protractor and as per company policy, I am unable to utilize XPath. I am facing difficulties with the code below and would greatly appreciate any insights or assistance provided

I am looking for guidance on how to write automation test scripts for a small AngularJs application using the cucumber-protractor-typescript framework. As someone new to Angular applications, I am particularly concerned about creating reliable locators. B ...

csscss-selectorsui-automation

Slide-out left menu using HTML and CSS

Currently, I am in the process of constructing a website that requires a menu to gracefully slide from the left side of the screen (with a width of 0px) to the right side (expanding to a width of 250px), all with the help of jQuery animations. Here is wha ...

jqueryhtmlcss

The Node.js server pauses its listening activities until the promise, which involves an asynchronous function that runs a loop with the goal of making it operate in the background, is

My server code is set up to listen on a specific port: app.listen(PORT, () => { console.log(`Server running on ${PORT}`); }); When a request is received, it is sent to a function for processing: app.get("/", (req, ...

javascriptnode.jsexpressserver

When employing useEffect, clearInterval cannot halt the execution of SetInterval

My attempt to create a function that initiates a countdown when the isPlaying variable is true and stops when it's false has not been successful. Instead of working as intended, it starts multiple intervals concurrently. The value of isPlaying changes ...

javascriptreactjsreact-hooks

JS setTimeout not postponing execution

Attempting to introduce a delay before an AJAX call. var delay = 2000; $("#c_name").on("keyup", function() { var entered = $(this).val(); if (entered.length > 1) { setTimeout(dosearch(entered), delay) } }); Struggling to implement a d ...

javascriptjquerysettimeout

How can I make the cssRenderer layer element transparent so that the webglRenderer layer is visible beneath it in Three.js?

A test is being conducted on a cssRenderer that is running a scene directly in front of a webglRender. This setup allows both to run together, creating the illusion of including html dom elements (div and text) in webgl. The goal is to make the textbox ba ...

javascriptcanvas3dthree.js

When using addClass("test"), it throws an error message: TypeError: undefined is not a function

Upon examination in the console, I discovered the following: $(".myCssClass")[0].parentNode <li><span class="myCssClass">some text</span></li> I am attempting to add a CSS class to the parent span tag within the <li> element ...

javascriptjquery

Utilize Jquery to send a preset value through an ajax request

I am working on a select box functionality where the selected option is sent via ajax to a server-side script. The current setup is functioning properly. Here is the code for the select box: <select id="main_select"> <option selecte ...

javascriptjqueryajax

Unable to relocate the cursor to an empty paragraph tag

Wow, I can't believe how challenging this issue is. My current project involves implementing the functionality for an enter key in a content editable div. Whenever the user hits enter, I either create a new p tag and add it to the document or split t ...

javascripthtmldom

Perform PHP function without refreshing the page when clicking

I have a PHP script that displays an alert box with the options OK or CANCEL. If OK is clicked, it redirects to a link that triggers a PHP function to delete the selected image. <?php //echo $pictures['binId']; if(count($other_images)) { ...

javascriptphpjqueryajax

When working with VueJS and Vuex, using the splice method to replace an item (object) in an array stored in Vuex does not trigger a re-render of the

I have an array of records. Each record consists of an object with _id (mongo id), title, and value (value is an object with amount and currency). When displaying the list of records using v-for, the ':key' for each item in the list is set to th ...

javascriptvue.jsvuexvuejs3v-for

Arrange the JSON object according to the date value

I am working on a JavaScript project that involves objects. Object {HIDDEN ID: "06/03/2014", HIDDEN ID: "21/01/2014"} My goal is to create a new object where the dates are sorted in descending order. Here's an example of what I want: SortedObject ...

javascriptjsonsortingdateobject

Step by step guide on uploading files using Vue.js and Express.js

Hello there, I am new to Vuejs and Express and I'm looking to practice my skills. Currently, I am attempting to build a User Profile with an image upload feature using Vuejs and ExpressJs but unfortunately, none of the files or text are uploading as ...

javascriptvue.jsexpressmulter

Is it possible to nest CSS Variables within CSS Variable names?

Is it feasible to embed a CSS Variable inside another CSS variable's name or perform a similar action like this: :root { --color-1: red; --index: 1; } span { color: var(--color-var(--index)) } ...

csscss-variables