Reverting a concealed segment

Can anyone make sense of my unconventional explanation? I've set up a hidden section as shown below:

<section class="intro">
<label>
  <input type="checkbox">
  <span class="menu">
    <span class="hamburger"></span>
  </span>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>
</section>

<section class="invis">
</section>

.invis {
  display:none;
}

When a "button" is pressed, the section should reappear - default: hidden, visible when clicked, and hidden again when closed. Now, for the interesting part (indicated by ** **):

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
  border-radius: 0;
  **display: .invis**;
}

How can I achieve this functionality? Examples in code would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

CSS does not work that way. To achieve the desired result, you can simply toggle a class on and off with the click of a button:

document.querySelector("input[type=checkbox]").addEventListener("click", function(){
  document.querySelector(".menu").classList.toggle("invis");
});
.invis {
  display:none;
}

label input:checked + .menu {
  box-shadow: 0 0 0 100vw #E0C9B7, 0 0 0 100vh #E0C9B7;
  border-radius: 0;
}
<section class="intro">
<label>
  <input type="checkbox">
  <span class="menu invis">
    <span class="hamburger">Hamburger Icon Here</span>
  </span>
  <ul>
    <li>
      <a href="#">Home</a>
    </li>
    <li>
      <a href="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</label>
</section>

Answer №2

It seems like the solution you're looking for. I have made adjustments to 2 CSS selectors:

label input:checked + .menu {
  height: 100vh;
  width: 100vw;
  top:0;
  right:0;
  background-color: #fff;
  border-radius: 0;
}

label input:checked + .menu .hamburger {
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  top: 35px;
  right:25px
}


/* Additional styling */
body, html {
    height: 100%;
    margin: 0;
}

* {
  box-sizing: border-box;
}

section {
  width: 100%;
  display: table;
  margin: 0;
  max-width: none;
  height: 100vh;
}

.intro {
  background-color:#291411;
}
...

<section class="intro">
<label>
  <input type="checkbox">
 ...
</section>
Corrected fiddle provided if needed: https://jsfiddle.net/4h86b8ep/2/

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

Styling the scroll bar within a fixed parent container's inner div with CSS

Check out the JSBIN link here: JSBIN The modules container has a fixed height of 100%. I am attempting to make the list items scroll while keeping the search div fixed within the wrapper container, ensuring that the search bar remains visible at all times ...

css

Codeception is unable to interact with an element that it recently encountered

Greetings to the wonderful users of Stackoverflow, Currently, I am in the process of creating acceptance tests using Codeception with Selenium as the WebDriver module. I have encountered an issue while trying to verify the existence and functionality of o ...

htmlseleniumcodeceptionacceptance-testing

Troubleshooting Div Element Width in CSS Not Functioning

When working on a form design, I encountered an issue where the text labels were not aligning to the same width. Despite setting the width, it didn't seem to work as expected: .form-label { display:inline; width: 160px; } <div class="form-label ...

htmlcsswidth

Silhouettes dancing across handcrafted designs

I have been trying to create a custom geometry using vertices and faces, but I am facing an issue where the geometry does not cast shadows on itself and the faces all have the same color as it rotates. I have attempted various solutions but haven't ha ...

javascriptthree.js

Angular Automatically Generated Identifier for Event Detection

By using jQuery, I can easily target an ID that starts with "conditionValue" $(document).on('focus', "[id^=conditionValue]", function (event) { // code }); But how can I achieve the same in Angular when looking for an ID starting with somet ...

javascriptjqueryangularjsangularjs-scope

Finding differences between two 24-hour format times using moment.js

Is there a way to compare two times in 24-hour format using the code below? $("#dd_start_timing, #dd_end_timing").on('keyup change keydown', function() { var DutyDayStartTime = $("#dd_start_timing").val().trim();// 13:05 var ...

javascriptjquerymomentjs

What is the best way to remove table cells from a TableBody?

Currently, I am in the process of designing a table to display data retrieved from my backend server. To accomplish this, I have opted to utilize the Table component provided by Material UI. The data I retrieve may either be empty or contain an object. My ...

javascriptcssreactjshtml-tablematerial-ui

Is it possible to use square brackets in conjunction with the "this" keyword to access a class property using an expression?

export class AppComponent implements OnInit { userSubmitted = false; accountSubmitted = false; userForm!: FormGroup; ngOnInit(): void {} onSubmit(type: string): void { this[type + 'Submitted'] = true; if(this[type + 'For ...

javascriptangulartypescript

Vue.js - Displaying validation errors when a user interacts outside of a component

The ExamEditor Vue component I am working on is quite complex, consisting of sub-components like QuestionEditor and ExerciseEditor. These components are all tied to an exam object that contains nested arrays with questions and more. The layout inside the e ...

javascriptformsvue.jsvalidationuser-experience

Prevent displaying page confirmation prompts when a user clicks on hyperlinks

One way to display a confirmation message when a user tries to leave the current page is by using this method: window.addEventListener("beforeunload", function (e) { var confirmationMessage = "Are you sure you want to leave?"; ...

javascript

"Experience the power of utilizing TypeScript with the seamless compatibility provided by the

I'm attempting to utilize jsymal.safeDump(somedata). So far, I've executed npm install --save-dev @types/js-yaml I've also configured my tsconfig file as: { "compilerOptions": { "types": [ "cypress" ...

javascripttypescriptjs-yaml

Unlock a multitude of outcomes with Sequelize

Is there a way to retrieve multiple results from Sequelize and store them in an array? For example, I want to fetch all the values in the name field from the test table and display them in the console. This is what I tried: test.findAll().them(function(re ...

javascriptnode.jssequelize.js

How can we initiate the AJAX request right away while also making sure the page is fully loaded before adding

One trick I've discovered is that by submitting an AJAX request in the <head> section of my webpage, I can avoid a minor flicker on page load when loading content via AJAX. Of course, this method still needs some refining to handle longer AJAX r ...

javascriptjqueryajaxhtml

MUI Autocomplete fails to refresh the chosen value when its onChange function modifies the state

My React version 18.2.0 code structure is structured as follows: const [searchParams, setSearchParams] = useState({ shoes:false, hoodies:false }); const handleShoesDropDownChange = (e, v, setSearchParams) => { console.log(' ...

javascriptreactjsmaterial-uiautocompletemui-x

Ways to include a right arrow symbol for sub-child items and a downward arrow for child menu options

I have a php form that generates a drop-down menu using php mysql. The current menu is simple, but I would like to enhance it by adding a right arrow for sub-children and a down arrow for child menus using css. Unfortunately, I am unable to modify the css ...

phpjqueryhtmlcssmysql

Ways to resolve the issue of the experimental syntax 'jsx' not being enabled

I encountered an issue while trying to implement react-fancybox and received an error. https://i.sstatic.net/vgFha.png To resolve the error, I executed the following commands: npm install --save-dev @babel/preset-react, npm install --save-dev @babel/plugi ...

javascriptreactjsnpmbabeljs

An error will occur if you try to modify the state of a component from outside the component

Creating a modal component that triggers a bootstrap modal from any section of the application and then defines custom states for that component externally. It is functional, however, an error message consistently appears upon opening the modal, and I am u ...

javascriptjquerytwitter-bootstrapreactjs

How can I showcase array elements using checkboxes in an Ionic framework?

Having a simple issue where I am fetching data from firebase into an array list and need to display it with checkboxes. Can you assist me in this? The 'tasks' array fetched from firebase is available, just looking to show it within checkboxes. Th ...

javascriptangulartypescriptionic2ionic3

Revise the cascading style sheets for HTML content loaded via AJAX

I have a situation where I am dynamically loading HTML content using AJAX with JQuery. After the content is loaded, I am triggering a click event on specific elements within the newly added HTML. However, I am encountering an issue when trying to set the ...

htmlcssajaxdynamic

Issue with PHP page not properly connecting to the recently updated CSS file

Yesterday, I successfully linked my CSS in the head tag right below the title tag using this code: <link href="css/main.css" rel="stylesheet"> Yesterday, everything was working fine with the styles. However, today when I try to add new styles, the ...

phphtmlcss