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 want to dynamically add values from checked checkboxes to a URL for use in an AJAX call. I only want these values to be added to the URL if the checkbox is checked. If a user checks and then unchecks, I do not want that value included in the URL. Below ...
<script type="text/javascript"> let x = "1.html"; let y = "2.html"; function redirectPage(form){ for(let i=0; i<form.length; i++) { if(form.answerq[i].checked && form.answerw[i].checked && f ...
I'm dealing with a situation where I have an h6 nested inside a div. <div class="cylinder" data-v-5147e140=""> <div data-v-5147e140=""> <h6 class="quantite" data-v-5147e140="&qu ...
I am looking to transition my React+Redux application from using rest-requests to graphql-requests in my actions. What is the easiest way to accomplish this change seamlessly? I have come across Apollo while researching, but I prefer a simpler method to i ...
Can anyone assist me with this CSS issue? When I hover over to view the movie details, the entire word flips along with it. Is there a way to make only the word flip initially, and then have it return to normal when hovered? The HTML code is included belo ...
I require some assistance with the following: Specifically, I need help regarding the structure shown below: <div class="row"><div class="col-md-4"> <a class="individ" href="index.php?p=x" style="margin:5px 5px;"> ...
I recently set up a form on my WordPress website for users to submit data. Once the form is submitted, I use AJAX to create a new post without having to reload the page. I now need to figure out how to pass the post ID, a simple integer, back to the page s ...
I am attempting to calculate the distance between the top of an element and the top of the page every time the user scrolls. Although I have managed to make it work, the issue arises when scrolling - the distance remains unchanged. I tried addressing this ...
I have just started learning HTML and CSS, and I'm curious to know how I can center the links Home, About, and Contact in the header. HTML: <body> <header> <h1><a href="#">HBT</a> </h1& ...
I recently came across a resource discussing the process of executing a perl script from a webpage. What is the best way to run a perl script from a webpage? However, I am facing a situation where the script I have takes more than 30 seconds to run and d ...
My web app features both upper and lower elements (div) with a position: fixed. Each element has child popups also with position: fixed. Even though I want to position the popup above its parent element, using z-index doesn't work due to inheritance ...
(Apologies for the perplexing title) My intention was to create a slideshow gallery, and I stumbled upon an example here: https://www.w3schools.com/howto/howto_js_slideshow_gallery.asp In this setup, you'll notice previews of images in a small bar b ...
After following the W3Schools tutorial to create a slideshow, I found that the animations are working correctly. However, only three dots appear on the screen and I have to manually click on one of them to view the pictures. var slideIndex = 0; sh ...
Looking for assistance with this particular scenario: { "EekvB3cnwEzE":{ "name":"hi", }, "Brv1R4C6bZnD":{ "name":"yup", }, "kRwRXju6ALJZ":{ "name":"okay", } } I'm attempting to store each of these objects in an array. Howe ...
I need help with making Protractor navigate to google.com and search for a term. After successfully loading the non-angular page of Google, I am struggling to figure out how to make Protractor press "enter" or click the search button. Any suggestions? Ad ...
Recently, I used a nifty CSS-Element-Queries tool to perform basic element manipulations that trigger whenever the window is resized. In simple terms, my goal was to dynamically adjust an element's attribute based on the current width of the window â ...
I've been attempting to use the angularjs filter method for searching, but it doesn't seem to be working correctly. Despite not seeing any errors in the console, the search results aren't showing up. Can someone lend a hand with this? Below ...
Is it possible to conceal the arrow in a standard dropdown select fieldset? Check out this Fiddle for more information I am working on an autocomplete feature where users input an organization number and relevant information is fetched from a database. I ...
I am attempting to make REST API requests in order to retrieve data and display it on a website. Although I have created a for loop to gather the data, I am encountering an issue where the data is not being displayed on the website. Upon checking with th ...
As I develop a custom eslint plugin, I am intricately analyzing every MemberExpression to gather important data. Once all the expressions have been processed, I want to present a summary based on this data. Is there a specific event in eslint, such as "a ...