Apologies for asking such a beginner question, but I've searched high and low for a similar post, to no avail.
Here's my query:
I have a paragraph text in my HTML code that I want to automatically replace with new text when I click a specific Button.
Is it possible to achieve this using just CSS, without involving any javascript?
I'm mindful of users who block javascript, which is why I am exploring alternative solutions...
Thank you very much.
Hey @Vaidya & @Preet, did you know that it's actually possible to achieve this using only CSS?
Check out this article for more information: https://css-tricks.com/swapping-out-text-five-different-ways/
@fana, if you want to make changes affect the following div instead of itself, you'll need to use a plus selector or a tilde selector.
It seems like using CSS to replace content is not well-received in the stackoverflow community due to code cleanliness concerns. However, I believe that as time goes on, we will discover the true potential of CSS/SASS and start incorporating more programmatic and dynamic elements into our designs.
Doing this task using CSS alone is not possible; you will have to incorporate a script to handle the on-click event.
Although it may not be exactly what you're looking for, this concept can provide you with some inspiration. With a few adjustments, you can customize it to fit your needs. (Please note that achieving conditional and click events using only CSS is not possible; JavaScript is required for that.)
If you want to trigger an action on text click itself, there's a simple method to achieve it. By using a hidden checkbox and displaying the text inside a label element, you can easily switch between different texts using just CSS:
#example {
position: relative;
}
#example-checkbox {
display: none;
}
#example-checkbox:checked + #example:after {
content: "Hide";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: white;
} <input id="example-checkbox" type="checkbox">
<label for="example-checkbox" id="example">Show</label>
Reference Take a look at the CSS-only approach.
I hope this information proves helpful for you.
I recently put together a website dedicated to watches. Feel free to check it out at horology dot info. (Please refrain from sharing the direct URL of my site in your reply.) I'm curious as to why the dropdown menu, sourced from , is showing up unde ...
I am facing an issue with a form on my website that contains input fields as shown below. I am trying to add two input boxes to calculate the values of the third input box, but it is only working correctly for the first set and not for the rest. How can ...
When attempting to retrieve a JSON Object, I unexpectedly received an array instead. My query is based on the primary key, so I anticipate only one result. This is my current method : router.get("/student_info/:id", (req, res, next) => { connecti ...
I'm encountering an issue when trying to update key values within an object. It seems to be adding duplicate values or combining all values together instead of assigning each name a specific language slug. I can't figure out where I'm going ...
I am attempting to click on a button with the following code: <div style="text-align:center" id="plus_res"> <img src="https://www.tunlancer.com/theme/images/plus_resv2.png" align="plus d'elements" title ...
Here is the HTML code for my form: <form action="#" class="searh-holder"> <input name="se" id="se" type="text" class="search" placeholder="Search.." value="" /> <button class="search-submit" id="submit_btn"><i class="fa fa-sea ...
In the midst of my college project, I've encountered a hurdle. There's an image I need to overlay with a box that has padding on all sides corresponding to the outline of the image. Despite my attempts, I haven't been successful in achieving ...
Presently, I am utilizing a Timepicker from material-ui. It is currently configured with type="time", allowing me to select times throughout the day in 12-hour increments with an AM / PM choice. However, I wish to adjust my picker to a 24-hour format, elim ...
After deploying a JavaScript Cloud Function, it shows that the deployment is completed. However, when I check Firebase, the function is not there. Oddly, TypeScript Cloud Functions deploy successfully. I followed all the steps outlined in the original Fir ...
This question has been asked many times, but I can't seem to figure it out in my situation as I am new to HTML. I have three divs (boxes: QM, Audit, PM) and I want to center them within a parent div called Services. In the photo provided, you can see ...
Currently, I'm experimenting with utilizing AbortController to cancel an API call. The axios library is being used for this particular call. Before integrating it into my project, I decided to test the cancellation procedure with a simple call: const ...
While utilizing the react-querybuilder, I have encountered an issue with field validation not functioning correctly. Upon reviewing this StackBlitz, it appears that when clicking on Rule and checking all fields, there are no errors present. export const fi ...
My approach to processing json data looks like this: $scope.activities = response.data; console.log($scope.activities.length); var list = []; for (var i = 0; i < $scope.activities.length; i++) { console.log($scope.activities[i].name); list.pus ...
In my quest to handle the beforeunload event in Firefox, I've encountered a small hurdle. It seems to be working smoothly, but only if the user physically interacts with the page by clicking on it or entering text into an input field. Below is the co ...
function calculateTipAmount(bill) { var tipPercent; if (bill < 50 ) { tipPercent = .20; } else if (bill >= 50 && bill < 200){ tipPercent = .15; } else { tipPercent = .10; } return tipPercent * bill; } var bills = ...
Is there a way to stop coloring elements after 'tue 7-1-1' using CSS? I am only allowed to manipulate the first child of every element up until a certain point through CSS, without modifying the existing code. Note: Span elements are nested wit ...
import { ExtractJwt, Strategy } from 'passport-jwt'; import { AuthService } from './auth.service'; import { PassportStrategy } from '@nestjs/passport'; import { Injectable, UnauthorizedException } from '@nestjs/common&apo ...
I have been working on a seemingly straightforward 4-file toy solution that I thought was simple. I am looking to write a Jest test for the '/bingo' route in bingo.js which requires authentication. Below are the four files that make up this setup ...
After upgrading my project from NextJS 10 to NextJS 12, everything is functioning normally except for Storybook, which is now missing its styles. I utilize the styled-jsx library to create embedded css, implementing it in this way: const SearchResult = ({ ...
Is there a way to modify the styling, such as color, of the input type date in HTML 5? In HTML 5, we can display a calendar using <input type=date>. For example, if March 23rd is a holiday and I want to highlight this specific date in red, how can I ...