Is it possible to activate a block display for an article based on the class value when a radio

Here is the HTML code snippet I'm working with:

<div id="contentapp">
    <input type="radio" name="menu" id="interest" checked>
    <input type="radio" name="menu" id="about">

    <div id="tab">
        <label for="interest">Interest</label>
        <label for="about">About</label>
    </div>
    <div id="content">
        <article class="interest">
            Interest
        </article>
        <article class="about">
            About
        </article>
    </div>
</div>

And this is the CSS styling:

#contentapp article {
    display: none;
}

#contentapp input#interest:checked ~ article.interest{
    display: block;
}

I am facing an issue where I need to show the content blocks when the radio button is clicked, but it's not working correctly. Any suggestions on how to achieve this functionality in the correct way?

htmlcss

Answer №1

Utilize the div located between contentapp and article in your CSS for optimal results.

#contentapp div article {
    display: none;
}

#contentapp input#interest:checked ~ div article.interest{
    display: block;
}

For a demonstration, check out this JSFiddle link: https://jsfiddle.net/634ctoxw/

Answer №2

Give this a shot:

#contentapp #content section {
    visibility: hidden;
}
input#interest:checked ~ #content section.interest {
    visibility: visible;
}

Make sure to manage the ID correctly.

Answer №3

To implement the functionality, you can utilize the code snippet below:

$(document).on('click', "input[type='radio']", function(){
  $('#contentapp article').hide();
  var id = $(this).attr('id');
  $('.' + id).show();
});
#contentapp article {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="contentapp">
    <input type="radio" name="menu" id="interest" checked>
    <input type="radio" name="menu" id="about">

    <div id="tab">
        <label for="interest">Interest</label>
        <label for="about">About</label>
    </div>
        <div id="content">
        <article class="interest">
            Interest
        </article>
        <article class="about">
            About
        </article>
    </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

using ng-class or ng-style for displaying error messages when validating a text area content

I'm curious about the most effective "angular" method for changing the character count style for validation purposes. I have a text area with a 250-character limit. Instead of restricting users to exactly 250 characters, we want to allow them to excee ...

javascriptcssangularjs

Enhancing the appearance of h3 headings using CSS without changing the HTML code

I'm looking to add some style to the h2 elements on my website. Here is an example of a website where I like the styling: Another reference site for comparison is: If you look at the first h3 heading that reads "Head To Head Comparison Between Merge ...

htmlcss

How to use jQuery to retrieve the style of an element based on a specific data attribute

I've been using bxSlider and I decided to create a unique custom pager using the pagerCustom option. My goal was to make the pager resemble a thumbnail pager, so I attempted to copy the style of each slide and attach it to the corresponding pager. For ...

javascriptjqueryhtml

Hiding the overflow conceals the entire image in one direction, while leaving the other exposed

Here is the code I have written for my project (view fiddle here): img { width: 200px; height: 200px; } .image-container { width: 600px; height: 200px; overflow: hidden; } I am working with multiple images, all sized at 200px by 200p ...

htmlcss

Limit Range of jQuery UI Slider Button

How can I modify the jQuery UI slider range to keep the button within the slider div and prevent it from overlapping as shown in the screenshots below? ...

javascriptjquerycssuser-interfaceslider

Using DOMParser() eliminates whitespace

Basic code example: const parser = new DOMParser(); const foo = parser.parseFromString(<p> Foo</p>, 'text/html'); console.log(foo); This results in Why have all the leading empty spaces before "Foo" disappeared? ...

htmldom

Attempting to fill a collection of JSON entities through a GET call?

When handling a GET request that contains a list of JSON objects, I want to display the data in an input field on the screen using ng-model for data binding. The structure of the JSON get request is as follows: [{"make":"Mahindra","vin":"1987","model":"XU ...

javascripthtmlangularjsjson

UI binder is having difficulty resolving CSS

After creating a search panel for my application using UI binder, I noticed that the desired behavior is not being achieved. Ui.xml <g:HTMLPanel> <c:SimpleContainer> <c:InfoContainerHeader text="{labels.searchFilter}" /> ...

javahtmlcssgwt

Switch up the position of an element every time the page is refreshed

I have a webpage containing 5 images, each measuring 48px by 48px. I would like these images to be displayed in random positions on the page every time it is loaded. While I am aware that I will need to use CSS and JavaScript for this task (specifically f ...

phpjavascripthtmlcss

Using JSON parsing to extract an integer as the key in JavaScript

I've been searching for almost 2 hours now, but I can't seem to find anyone using an integer as the key in their json object. The structure of my json object is as follows: {"342227492064425": {"added":"2020-10-04T23: ...

javascripthtmlarraysjson

What is the best way to insert a <dv> element following a <Typography> component in the provided code?

After learning React, I have attempted in various ways to get this code snippet to work. I referred to a question on Stackoverflow as well as the HTML div documentation The goal is to have the text and link displayed in a horizontal line, not vertically s ...

cssreactjsmaterial-ui

Can one utilize HTML's .querySelector() method to target elements by xlink attribute within an SVG document?

Here is the scenario: <body> <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <a xlink:href="url"></a> </svg> </body> Now, can you utilize the HTML DOM's .querySe ...

javascripthtmldomsvgxlink

Is it possible to position images in a circular layout around a central

I am struggling to position small planetary images around the main logo in a way that creates a satellite-like effect. Despite my efforts with positioning and margins, I have not been successful in achieving the desired look. Additionally, when I insert th ...

htmlcssparticles.js

How well do social media share buttons perform on websites

I'm experiencing issues with the performance of my gallery ever since I added social buttons. Currently, there are around 30 thumbnails in the gallery, each accompanied by four social buttons for different services like Facebook, Google Plus, Twitter ...

phphtmlperformanceshare-button

Applying styled numbering to elements using nth-child selector in

I have a div with multiple p tags inside. My goal is to assign them numbers using CSS. The number of p tags may vary. By using the :nth-child() selector and the ::before pseudo-element, I can achieve something like this: div p:first-child::before { ...

htmlcsscss-selectorspseudo-class

Creating rounded buttons with Font Awesome icons and hover effects

I am currently working on creating buttons similar to the design shown in the image below. https://i.sstatic.net/hMqHs.png I have utilized stacked Font Awesome icons to place the icons atop a circle, resulting in this look: https://i.sstatic.net/rtEkP.p ...

htmlcsstwitter-bootstrap-3font-awesome

Converting hierarchical JSON data into a table with rowspan using Angular

I am facing a challenge in creating a table using nested JSON obtained from an API. I am unsure how to dynamically merge cells when needed, especially since the JSON structure can be nested up to 6 or 7 levels. Desired Table : Expected Table Current Ou ...

javascripthtmlangular

In Firefox, the focus outline is not shown on a div that has a mask-image CSS rule applied to

In my code, I have multiple div elements that have the mask-image and -webkit-mask-image CSS rules applied to them. These divs are being used as UI slider components, so I want keyboard users to be able to tab between them and use the arrow keys to adjust ...

cssfirefoxaccessibility

What is the best way to pass the reference of the p tag every time the button is clicked?

This is the code I used to create a button: <button type="submit" id="likebtn" onclick="likedpost(this) " data-postid="<%=blog._id%>" data-author="<%=user.username%>">Like</button> ...

javascripthtmljquery

Steps for repairing a button positioned at the top of a nested container within a form

My search form includes side filters to help users narrow down their search, with the results appearing on the right. This is just a basic example, as my actual setup involves more filters. However, there is one issue – users have to scroll down the pag ...

htmlcsstwitter-bootstrapbootstrap-4