Selector in CSS targeted by using target selector

When you click on the anchor tag "Click me," is there a way to use only CSS to display the p tag with the text "This is my answer"? I am aware that placing the p tag after the anchor tag is a solution, but I am curious if there is a method to achieve this with the code provided below.

  <ul>
     <li>
        <div>
           <a href="one" id="one"> Click me </a>
        </div>
     </li>
        <div class="info">
           <p> This is my answer </p>
        </div>
   </ul>


li {
    list-style: none;
}

.info {
    display:none;
  }

.info:target {
    display:block;
}

https://jsfiddle.net/vwep64bd/2/

Answer №1

Check out this clever CSS trick for manipulating elements using a hidden checkbox. It's definitely a bit unconventional, but it gets the job done.

For more information, take a look at: https://css-tricks.com/the-checkbox-hack/

li {
list-style: none;
}

label.link {
color: blue;
text-decoration: underline;
cursor: pointer;
}

div.info {
display: none;
}

#toggle-1 {
display: none;
}

#toggle-1:checked ~ div {
display: block;
}
<ul>
    <li>
        <div>
            <label class="link" for="toggle-1">Click Here</label>
        </div>
    </li>
    <input type="checkbox" id="toggle-1">
    <div class="info">
        <p>
            Here is the hidden content
        </p>
    </div>
</ul>

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

Subdomain Dilemma: Trouble with Images in Internet Explorer

Currently, I am working on creating a basic website on a subdomain. Everything appears to be running smoothly in Google Chrome except for one issue with the header image not displaying in IE8. The image link is . It seems that the problem may stem from IE ...

When using jQuery to enable contenthover on divs, they will now start a new line instead of

I've been working on achieving a layout similar to this, with the contenthover script in action: Mockup Draft Of Desired Look However, the result I'm getting is different from what I expected, it can be seen here. The images are not aligning co ...

Link inserted in between spaces

Working with Eloqua. Any ideas on what might be causing a space to appear in a link? The space doesn't show up during testing, only in the live version. Here is the code snippet: <p style="line-height:18px;"> <font face="calibri, Arial, H ...

Issue with iframe's size not displaying correctly

<body> <script> document.write("<iframe id='theframe' src='http://www.website.com?testvr=" + testvr + " height='900' width='500'></iframe>"); </script> </body> The iframe is added, but ...

Unexpected anomaly with Jquery's after() method

Currently, I am working on the following task: I want to dynamically add a new student to a table of existing students using AJAX when a student is added through my user interface. The process involves sending the UI input fields to the controller, which ...

The switch statement remains unchanged for varying variables

Here is some code that I am working with: updateTable(selectedIndex) { console.log("running updateTable function"); let level = ''; // if (selectedIndex == 1){ // this.setState({level: 'day'}) // th ...

Easy methods to navigate between screens without using React Router libraries

After experimenting with two different methods to switch between screens in a simple application (up to 3 modes/screens), I am still in the learning phase and mainly focusing on practicing with useState and possibly useEffect for certain scenarios. I&apos ...

Steps for assigning a 404 status code upon promise rejection

My approach to testing the login functionality involves using promises and chaining them. If the user enters an invalid password, the data is rejected; otherwise, it is resolved. I then verify if the user is logged in successfully by chaining these methods ...

Exploring the dynamic world through HTML5 canvas and animated objects

Today I am exploring HTML 5 canvas and experimenting with moving 3 circles on the canvas. Based on my research, it looks like I need to continuously redraw the circles (perhaps every 60 milliseconds) and clear out the old circle before rendering the new on ...

Implementing the @media rule using Javascript

I'm trying to use JavaScript to add an image dynamically, but I want to remove it when the viewport is 600px or wider. This is my approach so far: var img = document.createElement('img'); // (imagine here all the other fields being defined ...

Invalid POST Request Triggering 400 Error in Django with Ajax Communication

I have been through numerous discussions on various forums about this issue, but I am unable to make my form submit successfully; it always results in a 400 (Bad Request) error in the console. I have tried everything I could think of at this point, too ma ...

Map on leaflet not showing up

I followed the tutorial at http://leafletjs.com/examples/quick-start/ as instructed. After downloading the css and js files to my local directory, I expected to see a map but all I get is a gray background. Can anyone advise me on what might be missing? T ...

Mastering all changes to the 'src' attribute in the DOM

I am currently coding in Javascript and trying to implement a feature that monitors new 'script' elements and blocks specific sources. I have experimented with using MutationObserver and __defineSetter__, both of which can monitor changes to the ...

The material-ui library always registers Event.ctrlKey as true

When using the Table Component from the material-ui library, I encountered an issue with the multiSelectable feature. Setting the value of multiSelectable to true allows for multiple selections, but the behavior is not what I expected. By default, the sel ...

Getting the Most out of jQuery UI Autocomplete in ASP.NET

I am currently using jQuery UI Autocomplete in conjunction with ASP.NET. The process involves serializing Good names into a string array and then passing this array to the source of the jQuery UI AutoComplete. //PageLoad tadok.Entities.TList<tadok.Enti ...

Maximizing Bootstrap card size in Angular4: A step-by-step guide

How can I make Bootstrap cards resizable on top of other elements when clicked on an icon to make it full screen and overlay on other cards? detail.component.html <div class="card card-outline-info" > <div class="card-header bg-info"><h5 ...

Reducing image file sizes in Ionic 3

I have been struggling to compress an image client-side using Ionic 3 for the past couple of days. I have experimented with: ng2-img-max - encountered an error when utilizing the blue-imp-canvas-to-blob canvas.toBlob() method (which is a dependency of ng2 ...

Concentrate and select non-interactive elements with your mouse

Is it possible to set tab index on non-form elements like the div tag? I tried using tab index, but when the div is focused and the enter button is tapped, the ng-click event associated with the div tag is not triggered. <div tabindex="0" role="butto ...

Tips for customizing scroll bar padding and margin using CSS classes or IDs

I am looking to customize three different types of scrollbars with unique padding and margins. Here is the global style for my scrollbars: /* Modifying the scroll bar across the whole application */ /* width */ ::-webkit-scrollbar { width: 5px; he ...

The Math.random() function is responsible for producing a single random number

I have a unique idea for a keyboard that generates divs when keys are pressed. The keyboard functionality has already been implemented. Each div should be positioned randomly on the screen but still be grouped by letter. My approach involves adding a rando ...