Is there a way to toggle between display:block and display:none using only SCSS?

I have a website with a mega menu. When I click on "option 1", I want to show the list-1 by setting display: block. If I click on "option 2", I need to hide list-1 by setting display: none and show list-2 by setting display: block.

Below is an example of how the mega menu is structured:

<div>
    <ul>
       <li class="option-1"><a>option 1</a></li>
       <li class="option-2"><a>option 2</a></li>
    </ul>

    <ul class="list-1">
       <li>option</li>
       <li>option</li>
    </ul>

    <ul class="list-2">
       <li>option</li>
       <li>option</li>
    </ul>
</div>

Is there a way to achieve this functionality using just SCSS or CSS?

htmlcsssassmegamenu

Answer №1

To create a button-style checkbox without using JS/jQuery, you can apply the following code:

.option-1:checked ~ .list-1 {
  display:none;
}

.option-2:checked ~ .list-2 {
  display:none;
}
<input class="option-1" type="checkbox">
<input class="option-2" type="checkbox>

<ul class="list-1">
  <li>1</li><li>2</li>
</ul>

<ul class="list-2">
  <li>3</li><li>4</li>
</ul>

Answer №2

Another option is to utilize JavaScript or jQuery as demonstrated below:

$('.list').hide();
$('.button-1').click(function() {
   $('.list').hide();
   $('.list-1').toggle();
});
$('.button-2').click(function() {
  $('.list').hide();
   $('.list-2').toggle();
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button class="button-1">1</button>
<button class="button-2">2</button>


    <ul class="list-1 list">
       <li>option1</li>
       <li>option1</li>
    </ul>

    <ul class="list-2 list">
       <li>option2</li>
       <li>option2</li>
    </ul>
</div>

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

Stop horizontal overflow of content

This unique Vuetify demo on CodePen showcases a two-column layout. The first column contains a <v-list> enclosed in a green <v-alert>. By clicking the "toggle text" button, you can switch the title of the first list item between short and long ...

cssvue.jsvuetify.js

Dropdown box triggered by button

Currently working on coding a stylish button using CSS and HTML. The goal is for the button to drop down and reveal a hidden text box upon being clicked. Check out this image for reference: ...

htmlcssbuttonclickdropdown

Showing a div above another div without relying on z-index

I have designed custom drop down menus that consist of one <div> containing the current value and functioning as a <select> field, with another <div> below it that appears when the top one is clicked, displaying all the <option> val ...

htmlcssdrop-down-menuz-indexoverlap

Adjust the position of a textarea on an image using a slider

Currently, I am exploring how to creatively position a textarea on an image. The idea is to overlay the text on the image within the textarea and then use a slider to adjust the vertical position of the text as a percentage of the image height. For instanc ...

javascripthtmlcss

Using jQuery to display the total number of div elements for the selected individuals

Hey there, I'm just diving into jQuery and could use some assistance. I'm attempting to achieve a specific outcome with my code, but I'm running into some difficulties. Hopefully someone can lend a helping hand! Here's the scenario: If ...

jqueryhtmlajaxforms

Using Javascript to add hovering effects that demonstrate sophistication and style

I have a question : Here is the HTML code snippet: <div class="a b"> <span class="one">Success ONE</span> <span class="two">ONE</span> </div> <div class="a b"> <span class="one">Success TWO< ...

javascriptjqueryhtmlcss

What is the best way to design a polygon-shaped responsive div?

I've been attempting to design a unique layout with a pentagon-shaped div, however, I'm encountering some challenges. Despite using SVG for the shape, it does not display correctly in Firefox. Additionally, I need the div to be responsive and sca ...

htmlcsssvgresponsive

Looking for tips on how to achieve a sleek search bar expansion effect when focusing using w3.css?

I have been trying to utilize the following code to create a Google search bar that expands when focused within a w3.css navigation bar-item. While it does expand and contract on focus/blur, I am unable to achieve smooth transitions between sizes. The sear ...

javascripthtmlcssw3.css

My sub menu bar is not working properly, I need to fix it so that it can dropdown correctly

I'm struggling with my sub menu layout and need some assistance in fixing it. I've tried numerous times to adjust it using CSS, but without success. Here is the link to my menu. I'm still learning CSS and could really use some guidance: # ...

cssmegamenu

AngularJS allows you to toggle the visibility of a div at set intervals, creating

I am struggling with the task of showing and hiding a div that serves as an alert for my application. Currently, I am using $interval to create a continuous show and hide action on the div. However, what I aim for is to have the DIV visible for X amount o ...

javascriptjqueryhtmlangularjs

Center user input within a div element

I am trying to achieve proper alignment of input elements within a div. When the div is clicked, the input should be displayed; otherwise, a span should be shown instead. Here is my code: <!doctype html> <html lang="en"> <head&g ...

htmlcssvue.js

Enrollment in the course is conditional on two words being a perfect match

I have a concept in mind, but I'm struggling to piece it together. I have bits of different methods that just don't seem to align. That's why I'm reaching out for your expertise. Let's say I have 3 content containers with the clas ...

javascriptjquerycssmatch

Guide on validating dynamic gallery using Java with Selenium WebDriver?

Issue: The image in the gallery keeps changing dynamically, but the article content remains static. Upon clicking on the article, an image gallery opens with a large display image and several thumbnail images in a carousel format. Scenario 1 : I must en ...

javahtmlselenium-webdriver

A <div> with 100% height nested within a full-page div positioned at top:0 and bottom:0

Here's a simple problem. I need a full-height div (#inner) inside another full-height div (#outer, but with padding). This code displays correctly in Firefox and IE8, but not in IE7 and IE6. Edit: In the specific context where I'm using this s ...

htmlcssinternet-explorer

Showing the heading again after a new page starts

Currently, I am using WeasyPrint to generate a document and facing an issue with long sections that may span multiple pages. When a section breaks across pages, the name of the section does not display after the page break as intended. The following examp ...

pythonhtmlcssweasyprint

Steps to animate a div expanding to fit its content dimensions

I'm looking for a way to animate the opening of a div so that it adjusts to the size of its content. The content is fetched from a separate search using .load, which means it could be just a single line (no result) or multiple results that vary in hei ...

jquerycssanimation

Troubleshooting: Issue with Ajax communication to PHP backend script

I followed the solution on this Stack Overflow post but unfortunately it did not work as expected. When I open test.php, I see a box to input text and a submit button. However, when I try to submit the form, Firefox's developer console shows the follo ...

javascriptphphtmlajax

Attempting to troubleshoot a CSS grid layout for optimal functionality

I'm looking to achieve a unique layout where the image is on the left, but the content (title above meta, meta above text) is displayed on the right in a blog list style. With the limitation of not being able to change the HTML structure, I am wonder ...

csscss-grid

How can I modify certain attributes within an array of objects?

https://i.sstatic.net/TKkcV.jpgI need help with updating properties within an object array. Below is my code for reference. I have an object array consisting of two arrays, where the first one contains attribute "first" and the second one contains "last". ...

javascriptcssarraysreactjsobject

What could be the reason for the image not displaying properly in a React application?

Why isn't the image appearing as a background in the container with text on top? What am I doing wrong here? <div className="container-fluid"> <div className="col-md-12 col-sm-12 col-xs-12 bgContainer matchingTalent"> ...

htmlcssreactjstwitter-bootstrap