Switch button - reveal/conceal details

I am looking for assistance in toggling the visibility of information when clicking on an arrow icon. I have attempted to use JavaScript, but it was unsuccessful.

My goal is to hide the information below by clicking on the downward-facing arrow image , and then display the hidden information when clicking on the upward-facing arrow image .

If someone could provide guidance on achieving this functionality, it would be greatly appreciated.

DEMO - STACKBLITZ

CODE

<div *ngFor="let item of data">
    <div class="d-flex flex-row"
        style="align-items: center;margin-top: 8px;padding: 16px;background: #E8EEF5 0% 0% no-repeat padding-box;border-radius: 8px;">
    <div>
        <img src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
        <img src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>
  </div>
    <div><span style="margin-left: 8px;" class="selectioname">{{item.name}}</span></div>
    <div style="margin-left:auto">
        <img src="https://img.icons8.com/material-outlined/24/000000/close-window.png"/>
  </div>
    </div>
    <div class="d-flex flex-row"
                style="display: flex; align-items: center; margin-top: 8px;padding: 8px;border-bottom: 1px solid #CACED5;">
        <div class="">
            <img src="https://img.icons8.com/bubbles/50/000000/check-male.png"/>
    </div>
        <div>
            <span style="margin-left: 8px;">@{{item.name}}</span>
            <div>{{item.date}}</div>
        </div>
        <div style="margin-left:auto">
            <img src="https://img.icons8.com/material/24/000000/filled-trash.png"/>
    </div>
        </div>
</div>

javascripthtmlcssangulartypescript

Answer №1

To start, remove any styling associated with the hide1 class. It's more effective to utilize the *ngIf directive in Angular:

<img *ngIf="item.shown" src="https://img.icons8.com/android/24/000000/down.png" class="hide"/>
<img *ngIf="!item.shown" src="https://img.icons8.com/android/24/000000/up.png" class="hide1"/>

Next, create a function to toggle the shown property:

toggle(item) {
  item.shown = !item.shown;
}

Then, bind this function to a DOM event on the div containing your arrows:

<div (click)="toggle(item)">
</div>

Finally, use the *ngIf directive on any other element you wish to toggle:

 <div class="d-flex flex-row" *ngIf="item.shown" ...

Answer №2

One of the new features introduced in HTML5 is the use of the <summary> and <details> tags which allows for toggling information on a webpage.

Let's take a look at an example:

<details>
<summary>Click here to expand the information</summary>
<p>This information will be hidden until you click on the summary text</p>
</details>

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

Enhance your WordPress site by implementing infinite scroll with AJAX to seamlessly load more posts

Currently, I have implemented a feature that loads more posts through AJAX when the user clicks on a 'load more' button. The code I utilized is based on a tutorial found at this link. My goal now is to enhance this functionality so that instead ...

javascriptjqueryajaxwordpress

Utilizing Font Awesome within the `<fieldset>` element alongside Bootstrap 4 forms

When it comes to single-input forms in Bootstrap 4, a convenient method for incorporating font-awesome icons is by utilizing the input-group-addon class: <div class="input-group"> <span class="input-group-addon"> <i class="fa fa ...

htmlcsstwitter-bootstrapfont-awesome

Numerous slideshows using identical scripts

I am facing an issue with my code for multiple slideshows. Currently, it works fine for a single slideshow but when I have multiple slideshows and mouse over any of them, all the slideshows start running due to sharing the same class. However, if I try to ...

javascriptjquerycss

What could be causing the format to be incorrect?

docker run -it -v "%cd%":/e2e -w /e2e cypress/included:6.2.1 --browser chrome When attempting to execute this command within Visual Studio Code, an error is encountered: docker: invalid reference format. See 'docker run --help' Vario ...

javascriptcypress

The Access-Control-Allow-Origin policy does not permit requests from applications running with an origin of null, specifically for those using a file:// URL

I am in the process of creating a webpage that utilizes jQuery's AJAX feature to fetch images from both Flickr and Panoramio. While the image retrieval from Flickr is functioning properly, I encounter an issue when attempting to use $.get(url, callba ...

javascriptjqueryxmlhttprequestcorsjsonp

The server encountered a 500 Internal Server Error because it could not read the 'username' property of an undefined object

When attempting to register a user in a mongodb database using express, a POST call was made to localhost:3000/users/register The request body included: { "firstName": "Jason", "lastName": "Watmore", "username": "jason", "email": "<a ...

javascriptnode.jsjsonexpressproperties

Is it possible for TypeScript to convert a generic enum type into a string at runtime?

Enumerations and interfaces are an important part of my codebase: enum EventId { FOO = 'FOO', BAR = 'BAR', } interface EventIdOptionsMap { [EventId.FOO]: { fooOption: string; }, [EventId.BAR]: { barOption: number; } ...

typescriptenumstypescript-generics

The second angular $http call fails to reach its intended destination

I am in the process of setting up a flow similar to oauth, where I delay sending an actual request until some initial negotiation has been completed. The initial negotiation is successful, however, when I attempt to make the request for the desired resour ...

javascriptangularjsangular-servicesangular-http

Avoiding flickering when the browser back button is clickedAvoiding the flickering effect

As I work on developing an Asp.Net application, a challenge has arisen. In order to prevent users from navigating back to the login page after logging in, I have implemented JavaScript code successfully. However, when clicking the browser's back butto ...

asp.netjavascripthtmlbrowser

Is it possible to establish communication between JAVA and Javascript using Sockets?

Recently, I developed a Java application that generates some data and saves it in a text file on my computer. Instead of saving this data in a text file, I am looking to send it via Socket. Here is an example: Java public static void main(String argv[] ...

javascriptjavanode.jssockets

What is the process to ensure a React JS click handler updates the DOM upon execution?

I have almost completed a demo app using React JS, where data is displayed in a table. In the status column, hovering over an item triggers a popup div with 3 options to click on. After clicking on an option, I am able to run the click handler, but I' ...

javascriptreactjsevent-handlingrendering

Array of dynamically typed objects in Typescript

Hello, I am a newbie to Typescript and I recently encountered an issue that has left me stumped. The problem I am facing involves feeding data to a Dygraph chart which requires data in the format [Date, number, number,...]. However, the API I am using prov ...

javascriptangulartypescriptdygraphs

The callbacks in NextAuth do not appear to be functioning

I am currently working on implementing authentication with NextAuth in my Next.js app. I've noticed that the callbacks from the GoogleProvider are not being executed. Even after adding a console log statement, I cannot see any output in the console. A ...

javascriptauthenticationnext.jscallbacknext-auth

Guide to configure Validator to reject the selection of the first index option in Angular 2

When using a select option, it should be set up like: <div class="form-group row" [ngClass]="{'has-error': (!form.controls['blockFirstIndex'].valid && form.controls['blockFirstIndex'].touched), 'has-success&ap ...

angulartypescript

Adding scripts to a PartialView in MVC using Jquery's append function

My issue is with a JavaScript function that appends a PartialView into a div. Everything seems to work correctly, except for the fact that the PartialView contains some scripts enclosed within <script></script> tags. As a result, when these dyn ...

javascriptjqueryasp.net-mvcrazorasp.net-mvc-partialview

I am trying to figure out how to extract the filename from a form using PHP, but unfortunately, the $_FILES["filename"]["name"] method doesn't appear to be working. Can anyone help me with this issue

Having an issue with a form below that is supposed to extract some details into a mySQL database. Unfortunately, every time I try to retrieve the file in the form, it returns null. Unsure of the reason behind this, so any assistance would be much appreciat ...

phphtml

The jQuery.addClass() function seems to be malfunctioning

I'm encountering an issue with the addClass() method. For some reason, it's not functioning properly in this scenario: https://jsfiddle.net/0g1Lvk2j/20/ If you scroll to the end and close the last box by clicking on the orange box, the orange b ...

javascriptjqueryhtmlcss

Guide to embed a Google Sheets chart into a WordPress website

I'm looking to include a chart in a wordpress post, using the script generated from google sheets' publish function. When I add the script to a generic HTML page, the chart displays properly. However, when I insert it into a wordpress post, I en ...

javascriptwordpressgoogle-sheets

Building a dropdown menu component in react native

Looking to implement a dropdown menu in React Native using TypeScript. Any suggestions on how to achieve this for both iOS and Android platforms? Check out this example of a dropdown menu ...

typescriptreact-nativedropdown

Remove the float from the final list item in order to resolve display issues in Internet Explorer

I am trying to create a menu with the following HTML structure: <ul> <li id="btnHome"><a href="#">Link One</a></li> <li id="btnAbout"><a href="#">Link Two</a></li> <li id="btnContact"> ...

htmlcssinternet-explorer