Tips for updating the icon when collapsing or expanding a div:

I have the following code snippet in a razor component:

@{
    var id = $"collapseNotes{itemId}";
    var href = $"#{id}";

    <div>
        <i class="fas fa-angle-right"></i>
        <a data-toggle="collapse" href="@(href)" role="link" aria-expanded="false" aria-controls="@(id)">
            More info
        </a>
        <div class="collapse pl-3 pr-3" id="@(id)">
            <p>long text...</p>
        </div>       
    </div>
}

The collapsing and expanding functionality is working as expected.

However, I am looking to change the icon when expanding and then revert back to the original state when collapsed.

Is this achievable with just CSS or do I need to use JavaScript? Either way, what would be the recommended best practice for implementation?

javascriptcssbootstrap-4blazorblazor-server-side

Answer №1

<div>
    <i class="fas @(expanded ? "fa-angle-up" : "fa-angle-down")"></i>
    <a data-toggle="collapse" href="@(href)" role="button" aria-expanded="true" aria-controls="@(id)" @onclick="ToggleInfo">
        Show details
    </a>
    <div class="collapse pl-4 pr-4" id="@(id)">
        <p>more information...</p>
    </div>       
</div>

@code{
    bool expanded = true;
    public void ToggleInfo()
    {
        expanded = !expanded;
    }
}

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

Utilizing dual functions within the onChange event handler in React

I have a situation where I need to pass a function from a parent component to a child component through the onChange event, as well as another function in the child component to update its own state. How can I achieve this? Parent export function Fruits() ...

javascriptreactjstypescript

In React, when a user clicks the back button on the browser window, ensure you pass props back to the originating component

While moving from component A to component B through routing, I want to send a prop back to A when the user clicks on the browser's back button while on B. Can this be achieved? I am currently using React's history.push for navigating between com ...

javascriptreactjsroutesurl-routingreact-props

Conceal a div using jQuery when clicked

I am facing an issue with my script where I need to make a div close only after clicking on a link, instead of anywhere outside the div. http://jsfiddle.net/N4pbP/ $(function() { $('#hidden').hide().click(function(e) { e.stopPropagation() ...

javascriptjqueryhtmlcss

Can one conceal the JavaScript code that has been written?

Can JavaScript (jQuery) codes be hidden from view? I have a program with several load() functions and I'm worried that everyone can see the page addresses. Is this a risk? Example code snippet: load('account/module/message/index.php'); ...

phpjavascriptjquery

Dynamic elements cannot be referenced by jQuery

I am looking to apply a class to dynamically added content upon the successful execution of $(ajax). In an external Javascript file included at the beginning of the page and with all code executed within document.ready(), I have the following function tha ...

javascriptjqueryhtmlajaxdom

Displaying information obtained from other sources

Is there a way to extract data from websites without APIs and display it on my own website using JavaScript and React? I am looking to showcase information from multiple websites on my own site, but unfortunately these websites do not have public APIs. Ho ...

javascriptreactjs

Using Datatables to Merge Two Columns into a Single Select for Enhanced Search Functionality

My datatable appears as follows: <table> <thead> <tr> <th>Departure</th> <th>Destination</th> </tr> </thead> <tfoot> <tr> <th>De ...

javascriptjquerydatatable

Tips for verifying login credentials with MongoDB and Express: Leveraging db.collection().findOne() or .find() functions

I am encountering an issue with a POST request involving user credentials being sent from a Login page to the API Server. The code looks like this: loginUser(creds) { //creds is in the form of { username: bob, password: 123 } var request = { ...

javascriptnode.jsmongodbexpressdatabase

The hide() and on() methods are not compatible with Internet Explorer (IE)

My code is working fine on Google Chrome, but for some reason it's not functioning properly on Internet Explorer (IE). I'm using IE11 and really need this to work on all browsers. Please help me figure out what's going wrong here. $(' ...

javascriptjqueryhtmlcssinternet-explorer

Creating a seamless onscroll effect

Can someone please help me achieve the same smooth scrolling effect seen on these websites: I appreciate your assistance in making my website's scroll as seamless as these examples. Thank you! ...

javascriptcssreactjssmoothing

Remove every element from the div except for a select few

Imagine having a container with various elements like the ones below. <div id="ans" style="background-color: #FFD993; color: #FFF; overflow:auto; border: 1px outset #4f6417; -moz-border-radius: 8px; -webkit-border-radius: 8px;width: ...

javascriptjqueryhtmlcss

Is it possible to vertically and flexibly center a <div> over an <img>?

Check out this HTML: <div class="float"> <img class="left" src="bradBeachHeart.JPG" alt="Brad at the Lake" /> <img class="left" src="mariaNavi.jpg" alt="Making Maria Na'vi" /> <img class="left" src="mattWaterRun.jpg" ...

htmlcss

How come only the final element is being displayed from an array in JavaScript, rather than all of the elements present

I am facing an issue while attempting to extract specific information from a JSON data and create a new array with key-value pairs. However, instead of getting all the elements, it only returns the last one. Here is my current code snippet: const input = ...

javascriptarraysjsonobjectmapping

Timer ticking down - looking forward to the signal of completion

Looking to create a countdown timer for an upcoming event, but struggling to display a custom message upon completion. Ideally, I want the notification to say something like 'Event is started'. Can anyone offer assistance with this issue? Thank ...

javascriptjquery

Concealing the HTML button on a mobile display

On my website, I have a button that leads users to the next section of the page. I am trying to hide this button in mobile view but I am struggling to find the correct CSS code to do so. Check out the JSFIDDLE for the code: https://jsfiddle.net/cgqme8xo/ ...

htmlcsstwitter-bootstrapresponsive-designmedia-queries

Does the useState hook operate synchronously?

Previously, there has been a clear warning about the asynchronous nature of calling setState({myProperty}), where the value of this.state.myProperty is only valid after the callback or the next render() method. When using useState, how can I retrieve the ...

javascriptreactjsreact-hooks

Using JavaScript to iterate through user input and generate an array of objects

I am attempting to iterate over input elements inside a div in order to generate an array of objects. <div id="time"> <input type="text" name="from" placeholder="12:00 AM" /> <input type="text" name="to" placeholder="12:30 AM" /> & ...

javascriptjqueryarrays

Experience a different div content by simply hovering over it

Is there a way to implement a hover effect that displays an image over the entire display-div? For example, when hovering over item1, the image should cover the display-div, and when hovering over another item, the image within the display-div should chang ...

javascriptjquery

JavaScript/DOM - What sets apart a "CSS Selector" from an attribute?

When it comes to excluding declarative event handlers: <a href='#' onclick=<handler> ... /> Is there a significant difference between an Attribute and a CSS Selector? For example, if I define my own attribute: <a href='#&a ...

javascriptcssdom

Seeking the perfect message to display upon clicking an object with Protractor

Currently, I am using Protractor 5.1.1 along with Chromedriver 2.27. My goal is to make the script wait until the message "Scheduling complete" appears after clicking on the schedule button. Despite trying various codes (including the commented out code), ...

javascriptseleniumprotractor