Tips for controlling the visibility of elements based on the parent class containing an <a class="active">link</a> element

<div class="set">
    <a href="javascript:void(0);" class="active">SAMPLE <img class="" src="/active-arrow.svg">
    </a>
    <div class="content">details </div>

I need to apply CSS styling to the content class. If condition is met, then { display: block}. Otherwise, { display: none;}

I attempted the following:

.set > a.active {
  color: #123399;
  font-family: 'lato-bold'; }

.content {
  display: none; }

.set > a.active .content{
    display: block;}

However, the desired results are not being achieved.

css

Answer №1

If you're in search of the adjacent sibling combinator known as +, you've come to the right place.

a.active + .content {
   display: block;
}

The + combinator selects adjacent siblings, meaning the second element directly follows the first and they both have the same parent.
source: CSS selectors - CSS: Cascading Style Sheets | MDN

Example

const toggleActive = (btn) => {
console.log(btn.classList.contains("active"));
  btn.classList.contains("active")
    ? btn.classList.remove("active")
    : btn.classList.add("active")
}
.content {
  display: none; 
}
a.active + .content{
  display: block;
}
<div class="set">
  <a class="active" onClick="toggleActive(this)">TEST</a>
  <div class="content">content</div>
</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

Utilizing Bootstrap grid system to create varied column widths for content alignment

Looking to create a page with multiple entries that include text descriptions and associated icons of varying sizes, aligned neatly. (For simplicity, using letters "i" and "w" as placeholders for icons.) For wider screens, the setup should feature a grid ...

csscss-gridbootstrap-5

Creating a custom HTML table layout with both variable and fixed column widths, along with grouping headers

Is there a way to format an HTML table so that it appears like this: <- full page width -> <-20px->< dynamic ><-20px->< dynamic > +------------------+-------------------+ ¦ A ¦ B ...

htmlcsshtml-table

Decrease the gap between the <hr> and <div> elements

I currently have multiple div tags with hr tags in between, resulting in automatic spacing. I am looking to decrease this space. Please view the image link provided below for reference. [I am aiming to minimize the gap indicated by the arrow] Additionally ...

htmlcsstextlinespace

Hide the div only if a specific element is found on the page

I am currently exploring different methods to show or hide a left-hand navigation menu on my Volusion store. Is it possible to use JavaScript or jQuery to alter the CSS display property of a div based on the presence of another element on the page? The i ...

javascriptjqueryhtmlcss

Tips for correctly aligning input text boxes

https://i.sstatic.net/9fVwA.jpg I have created a code for an average calculator using HTML, CSS, Bootstrap, and JavaScript. The problem I am facing is with the alignment of the input text boxes. How can I adjust them properly? The user should enter the ...

htmlcssbootstrap-5

Is there a way to eliminate the black bar appearing on my progress bars in Chrome due to a glitch?

I've created a simple slideshow with a progress bar that functions as a 5-second timer before moving to the next slide. However, there's a strange black section on the progress bar in Chrome that I can't figure out. Here you can view the cod ...

jqueryhtmlcss

I am looking for a way to retrieve the ids of all div elements that have the same x coordinate using document.elementFromPoint in JavaScript. Can someone help me with

Currently, I am facing an issue where I have two divs positioned at the same x coordinate. I am attempting to retrieve the IDs of both divs using document.elementFromPoint(). However, I am only able to receive the ID of one div. var elem = document.elem ...

javascripthtmlcssangularjsreactjs

The left side of the page is anchored with text content while an engaging carousel occupies the right half

Looking to create a section on the website that remains fixed while a carousel scrolls vertically. Once you reach the final slide, scrolling will continue on the page rather than changing the carousel slide. Want it to function similarly to the Creative s ...

javascripthtmlcssreactjs

Creating consistent row spacing between Bootstrap 5 rows that matches the spacing in Bootstrap 4

Is it possible to adjust the site.css file in order to achieve a similar row spacing effect as Bootstrap 5 when working with existing HTML code? ...

cssbootstrap-4rowsbootstrap-5

Automatic line breaks in MathJax when displayed in a modal dialogue box

As part of a math project, I need to display the solution of a problem in a Sweetalert2 modal. However, despite using the following code: <script type="text/x-mathjax-config"> MathJax.Hub.Config({ tex2jax: { inlineMath: [['$','$ ...

javascripthtmlcssmathjaxsweetalert2

Tips on positioning images to the left and right without causing text to wrap around them

I have successfully floated an image to the left of text with the following CSS. How can I achieve a similar effect with an image to the right of text on the same page? Do I need to use a clearfix between the left and right images? Thank you! .innercont ...

htmlcssimagecss-float

Adjust the jQuery resizable handlers on the fly

I am encountering an issue when attempting to change the handler on a resizable element. Initially, I used : $(line) .draggable({containment:"parent"}) .resizable({ containment:"parent", handles: "e, w" }); N ...

javascriptjquerycsshandlerresizable

Utilizing a webkit transition to conceal a div element by setting its display property to "none"

I'm currently working with code that looks something like this: <style> #submenu { background-color: #eee; height:200px; width:400px; opacity: 1; -webkit-transition: all 1s ease-in-out; } .doSomething { ...

csshtml5-animation

Why is my md-button in Angular Material displaying as full-width?

Just a quick question, I created a simple page to experiment with Angular Material. On medium-sized devices, there is a button that toggles the side navigation, but for some reason, it expands to full width. There's no CSS or Material directives causi ...

javascriptcssangularjsmaterial-designangular-material

Alert popup onclick feature is malfunctioning

SOLVED: I finally figured out the issue and it is now working perfectly. I had to manually switch to Chrome instead of using the Brackets live viewer. I want an alert box to pop up when the "Home" link is clicked on my website. I tried creating a separate ...

javascripthtmlcss

The comparison between dynamically adding elements through Javascript and hiding them using CSS

I am contemplating the advantages and disadvantages of adding elements to a page and setting display:none versus creating a function that dynamically generates the elements and appends them where needed. In my current situation, I am implementing a reply ...

javascripthtmlcss

"Attempting to troubleshoot a calculator built with html, css, and js. I'm stumped as to what could

After following a tutorial on YouTube, going over the code multiple times, and still experiencing issues with the calculator. Sometimes it works fine, other times certain buttons like (+, -, x, ⁄) don't function properly. I've provided the enti ...

javascripthtmlcsscalculator

Ways to show just three buttons in a row using Bootstrap?

form{ display: flex; flex-flow: row wrap; justify-content: space-between; align-items: center; align-content: space-around; } form .buttons{ width: 100%; border: none; background-color: #ffffff00; cursor: pointer; } form .buttons img{ widt ...

phphtmlcssbootstrap-4

Presenting images in a row

Hello, I am facing an issue with displaying images retrieved from the database. They are not showing in-line. I have tried to put the images from a URL, and they display in-line, but the problem persists with images from the database. Any suggestions on ...

htmlcssimagetagsinline

Tips for aligning an image on top of another image

Here is the code I am working with (also pasted below). My goal is to create a layout with two columns, where the first column features two images and the second column displays some text. In the first column, I specifically want the first image to have a ...

htmlcss