Iterating over selected checkboxes and setting custom styles in SCSS

As a beginner in SCSS, I am uncertain if it is possible to create a loop function that would compile the following code:

I aim to apply certain CSS properties to specific elements when a particular input button is checked. My goal is to achieve this using only CSS and SCSS, without involving JavaScript.

#menu-results:checked + #reveal-results{ height: 100%; visibility:visible; opacity:1; };
#menu-membership:checked + #reveal-membership{ height: 100%; visibility:visible; opacity:1;};
#menu-lotterywest:checked + #reveal-lotterywest{ height: 100%; visibility:visible; opacity:1;};
#menu-grants:checked + #reveal-grants{ height: 100%; visibility:visible; opacity:1; };
#menu-more:checked + #reveal-more{ height: 100%; visibility:visible; opacity:1;};
htmlcsssassstyling

Answer №1

One solution could be to create a mixin that defines styles and then iterate over multiple ids. 

@mixin menu-checked-styles($name){
    #menu-#{$name} {
        &:checked {
            & + #reveal-#{$name} {
                height: 100%; visibility:visible; opacity:1;
            }
        }
    }
}

$menu-names: results, membership, lotterywest, grants, more;

@each $name in $menu-names {
    @include menu-checked-styles($name);
}

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

Visit the embedded AJAX feature that is failing to show any results

I've been working on this seemingly simple problem for days now, but I'm still stuck. I have the following Go code... package main import ( "fmt" "net/http" "html/template" "database/sql" _"github.com/mattn/go-sqlite3" ...

htmlajaxgo

Is it advisable to switch the doctype from HTML 4.01 or XHTML 1.0 to HTML5 for a web page?

When updating a legacy website to be more modern and "HTML5"-ish, is it considered safe to simply change the heading doctype as shown below? <!doctype html> The original doctype could be: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitiona ...

htmldoctype

Tips for aligning a menu that expands from the side to the center

I'm trying to center the menu on my webpage, but the issue is that it's stretching from the sides. Here's a sample image of the menu layout: I'm struggling to figure out how to fill the empty space on the left side of the menu. ...

htmlcss

Specifying file types in an HTML upload form

Is there a way to restrict my form so that it only allows jpeg files? Currently, it is displaying all types of files. <input name="image" type="file" /> Also, are there any JavaScript functions available for showing progress? ...

htmluploadinputprogressfile-type

Troubleshooting unexpected issues with dynamically updating HTML using innerHTML

Need help with a renderWorkoutUpdated function that replaces specific workout records with updated values. _renderWorkoutUpdated(currentWorkout) { let html = `<li class="workout workout--${currentWorkout.type}" data-id="${ curre ...

javascripthtmlinnerhtml

Can you guide me on implementing an onclick event using HTML, CSS, and JavaScript?

I am looking for a way to change the CSS codes of the blog1popup class when the image is clicked. I already know how to do this using hover, but I need help making it happen on click instead. The element I want to use as the button; <div class=&quo ...

javascripthtmljquerycss

Maintaining leading zeros in Firefox and SafariMaintaining leading zeroes in Firefox and

Having trouble with the number field in Firefox and Safari browsers (and possibly Opera, although I haven't tested it there). When entering an initial value in the number field that contains leading zeros, Firefox and Safari automatically remove them. ...

phpjqueryhtmlfirefoxsafari

In a Next JS project, the CSS Transition fails to activate when a class is dynamically added

In my Next.js project with Tailwind styling, I encountered an issue when using the globals.css file for more complex non-Tailwind CSS styling on a component. To better understand the problem, you can view the Code Sandbox here: https://codesandbox.io/p/sa ...

cssreactjsnext.jstailwind-css

I am having difficulty accessing specific data in JSON using Searchkit's RefinementListFilter

Utilizing searchkit for a website, I am encountering issues accessing previously converted data in json format. The structure of my json directory is as follows: (...) hits: 0: _index: content _type: content _source: ...

javascripthtmljsonreactjssearchkit

Trouble with Selenium Webdriver executing Custom Ribbon Button

I encountered an issue while trying to click on a Custom Ribbon MSCRM2011 Button in an automation script I'm writing. Below is the HTML structure: <li id="contact|NoRelationship|Form|Mscrm.Form.contact.MainTab.ExportData" class="ms-cui-group" unse ...

htmlseleniumxpathselenium-webdriverdynamics-crm

Internet Explorer and CSS: How to eliminate a highlight that pops up when the button is clicked

Could you please check out this website in Internet Explorer (I've tried it on the latest version as well as older versions.) On the above link, there are two circular buttons at the bottom of the page. In IE, when you click on a button, a semi-trans ...

htmlcssinternet-explorerhighlight

Wordpress Custom Post Type with a Sleek Slider Plugin

I am currently using a static slick slider to display testimonials on my website. Instead of hardcoding the testimonials, I want to fetch them from a WordPress custom post type that I have created. Can someone guide me in the right direction: <section ...

phphtmlwordpress

The select box in CSS is optimized for Chrome but poorly displayed in Firefox

Struggling with styling the select box for both webkit and moz browsers. It looks great in Chrome, but terrible in Firefox - the default option is not vertically aligned with the select box. Can someone help me pinpoint the issue in this code? CSS: sele ...

cssgoogle-chromefirefoxselect

Unleash the Power of Your Webpage: Instantly Engage Full

Is there a way to automatically make a webpage open in full screen mode as soon as it is loaded? Here's what I currently have: var elem = document.documentElement; function openFullscreen() { if (elem.requestFullscreen) { elem.requestFull ...

javascripthtmlfullscreen

Creating a SASS rule for targeting an element only if its parent does not have a specific classname can be achieved by using the '&' symbol in

Before anything else, I want to express my apologies if a similar query has been raised previously. Unfortunately, finding such specific cases can be quite challenging. My objective is to style every "a" element, excluding those enclosed within h1, h2, h3 ...

htmlcsssassparent

`How to perfectly place multiple text blocks and images using CSS`

Check out this screenshot to see the issue I'm facing: Here is the HTML code: <div class="parent_process"> <div class="first_process"><img src="images/exprimer-besoin-telephonie.png"/><span style="width:18%">You fi ...

htmlcss

Tips for recognizing components within the #document are as follows:

I am currently utilizing xpath to extract data from a dynamic table in an HTML document. The specific information I am looking for is contained within a tag identified as #document. However, I am encountering difficulties including this unique element in ...

pythonhtmlseleniumxpathiframe

Issues with the functionality of the contact form

I have recently purchased a new template that comes with a contact form featuring ajax and validation. I have tried to implement my script, but it doesn't seem to be working. I suspect there might be an issue on the server-side with my script. Can any ...

phphtmlajaxpost

What are the steps to add SVG effects to an image or div element?

Embarking on my first venture into using SVG graphics has left me feeling a bit bewildered. Despite extensive research, I have yet to stumble upon the answer to my current quandary. The objective at hand is to transform an image, assuming that the source ...

htmlcsssvgsvg-filters

A guide to spinning an image in every direction with CSS

I'm working on rotating an image in all directions using CSS and Vue.js. To demonstrate this, I have created a CodePen with the necessary code below. <div id="app"> <v-app id="inspire"> <div class="text-xs-center image-rotation" ...

htmlcssvue.jssass