I've been trying to figure out how to make a link show and hide a paragraph below it for some time now.
I want to do this using just CSS. The paragraph should be hidden by default, then display when the link is clicked, and hide again with another click on the link.
Any tips on how I can achieve this?
<a ………………>My link</a>
<p>Sed ut perspiciatis unde omnis iste natus</p>
Any assistance would be greatly appreciated.
In order to achieve user interaction on a webpage, JavaScript is essential.
JavaScript is specifically designed for user interaction, while CSS primarily focuses on presentation. This means that CSS has limitations when it comes to interactions (for example, it can respond to hover actions but not click actions in the expected way).
One possible workaround is using a checkbox to control "click" states and then displaying something based on that status using CSS.
To implement this solution:
<label><input type="checkbox">My link
<p>Sed ut perspiciatis unde omnis iste natus</p>
</label>
The corresponding CSS would look like this:
input[type="checkbox"] {display: none;}
input[type="checkbox"] + p {display:none; margin-left:1em;}
input[type="checkbox"]:checked + p {display:block;}
If you want to see an example of this in action, check out this Fiddle.
Keep in mind that while this approach may work, it may not be fully compatible across all browsers, so ultimately resorting back to JavaScript might be necessary. ;)
There is a way to achieve this without using JavaScript, just with CSS. Take a look at how it can be done:
http://example.com/css-only-solution
CSS
.toggle {display: block;}
.toggle-label { color: red; text-decoration: underline; }
.toggle-label:hover {text-decoration: none; cursor: pointer; }
#ToggleSwitch {display: none;}
#ToggleSwitch:checked + .toggle {display: none;}
HTML
<label for="ToggleSwitch">Toggle</label>
<input id="ToggleSwitch" class="toggle-input" type="checkbox" />
<p class="toggle">
This paragraph will show until you toggle the switch. Try it out!
</p>
Breakdown:
For more methods on achieving this with pure CSS, check out this resource: http://example.com/css-click-events-guide
It's worth noting that relying on a "hack" like this may not be ideal, but sometimes you gotta do what you gotta do to solve the problem at hand!
I am struggling to align my navigation bar with the toggler button on the left and the brand logo in the center, similar to the image provided below: https://i.sstatic.net/k34m9.png I am having difficulty achieving this layout. Currently, my code display ...
I'm currently working on a responsive website, and I have encountered an issue with a dropdown menu. When the browser size is reduced to 900px, the menu shifts all the way to the left side. To address this, I added some left padding to keep it off the ...
My table has a feature where I can change the background color and other elements using a slider. However, I'm facing an issue where the hover effect on the table stops working when I toggle the slider on or off. I attempted to solve this with a funct ...
My goal is to have the second paragraph following a h1 element display a dropcap, with the first being reserved for the author and date. Although I've tried using different CSS combinations like h1 + p::first-letter {}, it only affects the first para ...
When using jquery, I am attempting to access selected items from a select control that has multiple=true. My goal is to reference them by name criteria and then iterate through the list. Below is my current code snippet: var currentRow = $(this); // sele ...
Looking for some creative input here. Don't have a specific question in mind, but open to ideas. Just to clarify, I want both the floating div and the background to resize as the window size changes, while keeping the div in the same position on top ...
This is the JavaScript code I am using: app.use(express.static(__dirname)); app.use(bodyParser.urlencoded({ extended: false })); app.use(bodyParser.json()); // support json encoded bodies app.get('/', function(req, res){ res.sendFile(__dirn ...
I am currently developing an Electron application that includes a custom Notification feature. This feature involves html5 divs appearing and disappearing as necessary on a frameless, transparent, always-on-top window. Although the feature works well, I s ...
In the process of developing an app, I am encountering a challenge where I need to transfer user input to another element after processing it. However, I am facing an issue with accessing the updated value of the <textarea> using .text(), as it only ...
At the moment, I am in the process of developing my personal portfolio and have come across a perplexing issue that has left me stumped. The structure of my webpage operates on a main-frame structure, which means that instead of navigating through separate ...
I'm experimenting with creating a unique text effect where, upon hovering over the text, it appears as though a block of color is passing through it. Inspired by the technique showcased in this first example (specifically for the word "Kukuri"), I ut ...
I'm currently working on developing a responsive navbar. Everything seems to be functioning well in larger window sizes, but when I view it on an xs screen, the first element of the navbar does not collapse properly. For reference, here are two exampl ...
I'm working on a project that involves creating a dialog box that can be resized and dragged. While I found steps in the Material-UI Dialog documentation on how to make it draggable, I'm still looking for information on how to make it resizable. ...
In order to restrict access to certain resources, I need to implement a system that filters IP addresses. To validate the IP address, I currently use FILTER_VALIDATE_IP and filter_var. However, I am facing an issue where the starting and ending IP address ...
On my webpage, I have a layout that consists of a header, a footer, a left panel with inputs, and a right panel with outputs, all designed using bootstrap 4. The left panel is typically shorter than the right panel, and its height may vary in relation to ...
I am struggling to make my button show the menu when clicked. I have tried various methods but still can't pinpoint the issue. I utilized the "checkbox" trick to display the hamburger button when the site width is under 500px for a responsive menu, ye ...
I've encountered a strange issue with my website at . The navbar is extending beyond the viewport on mobile when using the live server. However, everything works fine on localhost. This problem only occurs on the "/" route; other routes display corr ...
Struggling with finding the correct function to open the hidden div of my responsive menu on my new website. Check out my code: https://codepen.io/anon/pen/XRJRGE <a class="page-head__menu" id="js-menu" href="#" onClick="open()">Menu< ...
While working on a specific project, I have encountered an issue where everything seems to function properly in newer browsers except for IE8 during testing. The dropdown menu is functional, however, it appears hidden behind the main content area labeled ...
I have a challenge where I need to execute different actions for specific divs. Here is the code snippet I currently have: $("#pending-cancel-1, #pending-cancel-2").click(function(){ Do something special for pending-cancel-1 and pending-cancel-2... }) ...