When a div is clicked, the text inside the button changes. If another div is clicked, the previous text is reset

I am seeking a solution for changing the text of a button within three columns when a specific 'advice-card' div is clicked on. The text should change to 'Hide' for the clicked div, and the other buttons should switch back to 'Show' when a different 'advice-card' div is clicked. Thank you

<div id="general-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>


<div id="super-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>


<div id="retirement-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>
javascripthtmljquerycss

Answer №1

Try this solution out.

    <div id="general-advice" class="col-sm advice-card">
    <div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - at no extra cost.</p>
    <button class="hideShowButton" id="button-0" onclick="hideShow(this.id)">Show</button>
    </div>
    </div>
    
    
    <div id="super-advice" class="col-sm advice-card">
    <div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - at no extra cost.</p>
    <button class="hideShowButton" id="button-1" onclick="hideShow(this.id)">Show</button>
    </div>
    </div>
    
    
    <div id="retirement-advice" class="col-sm advice-card">
    <div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - at no extra cost.</p>
    <button class="hideShowButton" id="button-2" onclick="hideShow(this.id)">Show</button>
    </div>
    </div>


<script>
    function hideShow(id){
        let i = 0; 
        let currentElement;
        let clickedElement;
        let elements = document.getElementsByClassName("hideShowButton");
        for(i = 0; i < elements.length; i ++){
            currentElement  = elements[i];
            if(currentElement.id != id){
                currentElement.innerHTML = "Show";
            }
            else{
                clickedElement = currentElement;
            }
        }

        if(clickedElement.innerHTML == "Hide"){
            clickedElement.innerHTML = "Show";
        }else{
            clickedElement.innerHTML = "Hide";
        }         

    }
</script>

Answer №2

I'm not entirely certain what you're searching for as you haven't provided your js code, but perhaps the solution below could be beneficial for you.

jQuery(function($){
$('.advice-card').each(function(){
$(this).click(function(e){
if($(this).hasClass('active-card')){
$(this).removeClass('active-card');
$(this).find('button').text('Show');
} else {
$(this).addClass('active-card').siblings().removeClass('active-card');
$(this).find('button').text('hide');
$(this).siblings().find('button').text('Show');
}
});
});
});
.advice-card {
margin: 2px auto;
width: 400px;
height: auto;
padding: 24px;
border: 1px solid #eee;
transition: all ease-in-out 0.3s;
display: flex;
}

.advice-card.active-card {
border: 1px solid red;
}

.advice-card .advice-card-footer {
width: 100%;
}

.advice-card button {
color: #fff;
text-transform: uppercase;
font-weight: bold;
letter-spacing: 1px;
background: blue;
border: 0px;
border-radius: 5px;
padding: 12px 24px;
float: right;
display: inline-block;
}

.advice-card.active-card button {
background: red;
}

.advice-card .advice-card-footer p {
margin: 0px;
visibility: hidden;
opacity: 0;
height: 0px;
transition: all ease-in-out 0s;
clear: both;
}


.advice-card.active-card .advice-card-footer p {
margin: 24px auto;
visibility: visible;
opacity: 1;
height: auto;
transition: all ease-in-out 0.3s;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="general-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>


<div id="super-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</div></div>


<div id="retirement-advice" class="col-sm advice-card">
<div class="advice-card-footer">
    <p class="advice-cost-disclaimer">Cost: Included with membership - no additional cost.</p>
    <button>Show</button>
</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

Error: The class constructor [] must be called with the 'new' keyword when creating instances in a Vite project

I encountered an issue in my small Vue 3 project set up with Vite where I received the error message Class constructor XX cannot be invoked without 'new'. After researching online, it seems that this problem typically arises when a transpiled cla ...

javascripttypescriptvite

Submitting information retrieved through an AJAX request to a MySQL database using PHP

I have implemented a JavaScript function to collect and display data, but now I am looking to save this data into a MySQL database for tracking purposes. I attempted to connect to the MySQL database locally using PHP code, but encountered some issues. I be ...

javascriptphpmysqlajax

Looking to adjust the width of a <div> element dynamically as the browser window resizes using jQuery

I am facing an issue where the width of a <div> should change based on the browser size using jQuery. Below is the code I have written for this functionality. if ($(window).width() > 990 && $(window).width() < 1190) { $("#greybor") ...

javascriptjquery

Converting JSON into HTML format

Seeking guidance as a developer tasked with rendering JSON to HTML on a webpage. I've taken over for someone else and, despite feeling somewhat in over my head, have managed to build the basic structure using Catalyst/Template Toolkit and Dojo. Now th ...

htmljsondojoxmlhttprequest

The function Slice() does not function properly when used with two-dimensional arrays

I have been attempting to duplicate a 2D array by value using the slice() method in order to prevent any changes made to the new array from impacting the original. Oddly enough, it seems that this approach is effective with a 1-dimensional array but not wi ...

javascriptarraysslice

The Bootstrap navigation pills do not function properly when using a forward slash in the tab link

I am currently working with Bootstrap and using nav pills. I have noticed that if I include a / sign in the link of a tab, it causes that specific tab to malfunction and triggers a JavaScript error in jQuery's own code when clicked on. How can I go ab ...

javascriptjquerytwitter-bootstrapnav-pills

Encountered an issue when attempting to create meanjs using yo

After installing yeoman globally, I encountered an error while trying to generate meanjs with yo. Unfortunately, I was unable to identify the root cause of the problem. view image here Any help would be greatly appreciated. I attempted using sudo as well ...

javascriptnpmyeomanmean

Unusual Methods in Vue.js: Exploring Odd Behavior

In my application, I have a single data variable called message, as well as a method in the methods section that performs cryptographic algorithms. Below is the code snippet: export default { data: () => ({ message: "" }), methods: { clic ...

javascriptvue.jswebpack

What could be the reason why the Google Maps API fails to load on Firefox?

I am currently utilizing the v3 version of Google Maps API. While my map functions perfectly in Safari and Chrome, I encountered an issue in Firefox where I received the error message "google.maps.Map is not a constructor." When inspecting 'google.ma ...

javascriptangularjsgoogle-mapsfirefoxgoogle-maps-api-3

Managing Margins and Padding in Multiple Lines of Divs in CSS

Trying to understand the spacing issues that arise when tiling a series of divs within a parent div. Here is a link to the fiddle for reference: http://jsfiddle.net/SNSvU/4/. Below is the code snippet: <div id="prioritiesWrapper"> <div class="p ...

cssalignment

Node.js: Calculating the number of requests processed per second in the http.get()

In my node.js project, I am creating a simple application for sending HTTP requests. var http = require('http'); var options = { host: 'www.example.com', port: 80, path: '/index.html' }; for(var i = 0; i < 500; i++ ...

javascriptnode.js

Explore our interactive map and widget features that will seamlessly fill your browser window for a

Struggling to make a webpage with a Google Map, Chart, and Grid expand to fill the available space on the screen. Tried various CSS tricks but nothing seems to work. Check out this simplified example in JsFiddle that showcases the issue: http://jsfiddle. ...

htmlcssgoogle-mapskendo-ui

Ways to toggle the visibility of a div with a click event?

I am working on a project where I have a list view of items. I want to implement a feature where when a user clicks on an item, a hidden div below it will appear with options like price, quantity, and other details. I am looking for guidance on how to achi ...

javascriptjquery

How to position a static element using CSS

I'm trying to align an image in the center of the screen, but I've run into some trouble. Typically, this is easy by setting the width of a div and using margin: auto;. However, I also need the div to have the position: fixed; property, which see ...

htmlcsspositionfixed

Changing the color of a pseudo element in Material-UI

I'm having trouble changing the border color of the ::after pseudo element on a standard text field from MUI. I've been unable to figure it out. <TextField id="standard-basic" label="Email" variant="standard"/> ...

htmlcssreactjsmaterial-ui

Fetching data dynamically using ajax as you scroll

Currently, I am using the jQuery Tools Plugin to create an image slider. However, I am facing a challenge with loading a large number of images all at once. Since the slider is coded in JavaScript, I am not sure how to control the scroll position. I would ...

javascriptjqueryajaxscroll

Puppeteer patiently waits for the keyboard.type function to complete typing a lengthy text

Currently, I am utilizing puppeteer for extracting information from a particular website. There is only one straightforward issue with the code snippet below: await page.keyboard.type(data) await page.click(buttonSelector) The initial line involves typin ...

javascriptnode.jswebweb-scrapingpuppeteer

Is it possible to create a button that can bring in a .css file?

Is there a way to create a button that imports styles from a .css file, or is it possible to change multiple CSS properties with buttons to create different website themes? This is the CSS file I have: .body { background-image: url("example.png"); } ...

javascriptjqueryhtmlcssbutton

Ways to crop a background image from the bottom left and right using CSS

I'm attempting to replicate the background image found at https://i.stack.imgur.com/nYDet.jpg My attempts to use clip-art on this image have been unsuccessful in achieving that shape. .hero-section { height: 740px; background: linear-gradient( ...

htmlcss

What steps are needed to build a Nested Default Dictionary in JavaScript?

I've been working on creating an Apps Script and have run into a challenge with implementing a Default Dictionary. Initially, I tried using the following code snippet: class DefaultDict { constructor(defaultInit) { return new Proxy({}, { g ...

javascriptgoogle-apps-scriptgoogle-sheets