Conceal one Div (toggle) while opening another

I created a toggle functionality that allows me to show or hide a div with information.

I am looking for a way to have only one toggle active, meaning that only one div should be visible at any given time.

By clicking on the arrow, I can activate the toggle and display the div. If I click on a different line, the previously displayed div will be hidden and only the current one will be shown.

DEMO

.html

<div *ngFor="let item of Items">
    <div class="d-flex flex-row divCamposEtxra">
        <div (click)="toggle(item)">
            <img *ngIf="item.shown" src="https://img.icons8.com/flat_round/64/000000/collapse-arrow--v1.png" style=" height: 30px;margin-right: 8px;"/>
            <img *ngIf="!item.shown" src="https://img.icons8.com/flat_round/64/000000/expand-arrow--v1.png"  style=" height: 30px;margin-right: 8px;"/>
     </div>
            <div>
                {{item.name}}
            </div>
            <div style="margin-left:auto;margin-right: 12px;">
                {{item.id}}
            </div>
        </div>
        <div class="d-flex flex-column" *ngIf="item.shown">
        <span>INFO</span>
    </div>
    </div>

.ts

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

Issue

https://i.sstatic.net/S9b2H.png

I want to ensure that only one div is open at a time, so when I click on a different one, the previous div should automatically close/hide.

angulartypescriptbootstrap-4

Answer №1

Here is the updated version:

Your application component code :

export class AppComponent  {
  current: number;
  Items=[{
    id:1,
    name:"name",
    shown: false
  },
  {
    id:2,
    name:"name2",
    shown: false
  },
  {
    id:3,
    name:"name3",
    shown: false
  }]

  toggle(item, i) {
    item.shown = !item.shown;
    this.current = i;
  }
}

HTML code snippet:

<div *ngFor="let item of Items; let i = index">
  <div class="d-flex flex-row divCamposEtxra">
    <div (click)="toggle(item, i)">
      <img *ngIf="i == current && item.shown" src="https://img.icons8.com/flat_round/64/000000/collapse-arrow--v1.png" style="height: 30px;margin-right: 8px;" />
      <img *ngIf="i != current || (i == current && !item.shown)" src="https://img.icons8.com/flat_round/64/000000/expand-arrow--v1.png" style="height: 30px;margin-right: 8px;" />
    </div>
    <div>
      {{item.name}}
    </div>
    <div style="margin-left:auto;margin-right: 12px;">
      {{item.id}}
    </div>
  </div>
  <div class="d-flex flex-column" *ngIf="current == i && item.shown">
    <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
    <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
    <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
    <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
    <span>TEXTETETETETETETEETETETASDTASDASDHASDJKLASDJASKDJASKLDJAS</span>
  </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

Is it necessary to utilize RequestHandler every time I create an Endpoint in Sveltekit?

As I work on creating a Todo website, I came across a video tutorial about building a Svelte fullstack app. The teacher in the video demonstrated the use of RequestHandler to create an endpoint. However, in the SvelteKit documentation, it recommends using ...

typescriptsveltekit

Angular does not propagate validation to custom form control ng-select

In my Angular 9 application, I am utilizing Reactive Forms with a Custom Form Control. I have enclosed my ng-select control within the Custom Form Control. However, I am facing an issue with validation. Even though I have set the formControl to be requir ...

angulartypescriptangular-reactive-formsangular-ngselect

Tips for showcasing information of a particular child in a database

I am currently immersed in a project that involves Cloud 9 and Ionic, with a Firebase database at its core. My main challenge lies in referencing the specific details of a particular vehicle (as per the database layout) and then displaying this information ...

typescriptfirebase-realtime-databaseionic2angularfire2cloud9

npm-install fails to automatically install sub-dependencies

I'm currently working on an Angular 4 project that has specific dependencies. The project is functioning properly as it is. Now, my goal is to utilize this project in another project. I've added the original project to the package.json file (und ...

node.jsangularnpm

Iterating through an array with ngFor to display each item based on its index

I'm working with an ngFor loop that iterates through a list of objects known as configs and displays data for each object. In addition to the configs list, I have an array in my TypeScript file that I want to include in the display. This array always ...

htmlarraysangularjstypescriptangular

Combining storybook and stencil: A comprehensive guide

I'm currently working on integrating storybook with stencil, but the stencil project was initially set up with the app starter using npm init stencil. Here's how it looks I've been researching how to use stencil with storybook, but most res ...

typescriptstorybookstenciljs

ag-grid provides unique filter options for custom date filtering in Angular 2

Currently, I am attempting to assign new options to a date column field by using the following method. However, these new options are not being displayed in the grid. let dateValues = ["equals", "inRange","quarter1","quarter2","quarter3","quarter4"]; { ...

angularag-grid

Using Typescript in the package.json as a dependency

After initiating a React project with typescript using the command below: npx create-react-app frontend --template typescript https://i.sstatic.net/8n4O5.png I noticed that the tyepscript, @testing, and @types libraries were added to dependencies rather ...

reactjstypescriptnpm

Creating a flexible row layout in Bootstrap 4 that adapts responsively

Here is the current layout of the page: https://i.sstatic.net/KuHiT.png However, when resizing to a mobile screen, the flex boxes overflow the container: https://i.sstatic.net/kI3ee.png Html: <div id="bars" class="d-flex flex-row text-whi ...

htmlcsstwitter-bootstrapflexboxbootstrap-4

Activate Popover on Third Click with Bootstrap 4

Is it possible to create a button that triggers a popover after 3 clicks and then automatically dismisses after one click using Bootstrap v4.3.1? Code: <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.mi ...

javascriptjqueryhtmlbootstrap-4

There is no index signature containing a parameter of type 'string' within the type '{ appointments: { label: string; id: number; minWidth: number; }[]; }'

Just getting started with React and Typescript. I'm attempting to extract data from the configuration file based on the input(props), but it seems like Typescript is throwing errors. Any suggestions on how to tackle this issue? config.json { "t ...

reactjstypescript

Is it possible to utilize a service that is already being used by the imported component?

Recently, I began working with Angular2 and have been quite impressed with it. However, today I encountered a challenge: I have a reusable alert component that utilizes its own service containing business logic. My question is, can I utilize the same serv ...

angularangular2-directives

Observing with starting value

When using an observable, I am trying to filter and display a list. The input event is only fired when the user starts typing, so initially the list is not displayed. How can I set a default value for the observable this.filterLocation$ until the input eve ...

angular

The function cannot be found within the specified file

Snippet.ts export class Snippet { public async processData(data): Promise<any> { //processing logic } } Snippet.spec.ts //correctly imported Snippet class describe('testing', async () =>{ it('ProcessData test ...

javascripttypescriptimportes6-classangular2-testing

Fatal Error: Unable to resolve dependencies for ProductListComponent

I'm currently developing an Angular 6 app and encountering an error when trying to inject a service into my component. The error message Uncaught Error: Can't resolve all parameters for ProductListComponent: (?) is not providing specific details, ...

typescriptserviceangular6

Prevent swiping beyond the final slide in a react-slick carousel

I am currently using react-slick to create a carousel, and I have a specific requirement to prevent swiping and dragging of slides once the last image is reached. After conducting some research, I attempted to set swipe: false on the final slide, which suc ...

javascriptreactjstypescriptslick.jsreact-slick

Warning from Firebase CLI deployment: The Node.js 8 runtime has been marked as deprecated and is scheduled to be phased out by 2020-12-05

Attempting to deploy TypeScript onto my FCF isn't working as expected based on the documentation and official Firecasts video. When deploying the default code (helloworld) instead of TypeScript, it deploys a node.js file which is confusing. Below are ...

typescriptfirebasegoogle-cloud-functionsfirebase-cli

What are the steps to enable the tab button feature?

Instead of using the ul and li tags, I have implemented three tabs with buttons. My goal is to automatically make the first button active or change its color to green. Despite using the active class in bootstrap, it does not seem to work as expected. How ...

cssvue.jsbootstrap-4

Convert HTML Form to PDF or Docx with Angular 4

My current setup involves Angular 4 with Node and MySQL. I have a form that, upon submission, needs to trigger a Save As... dialog box for the user to save the entered form contents as either a PDF or Word Doc. I've attempted using htmlDox and saveAs ...

jquerynode.jsangular

Exploring Angular 2 Routing across multiple components

I am facing a situation where I have an app component with defined routes and a <router-outlet></router-outlet> set. Additionally, I also have a menu component where I want to set the [routerLink] using the same routes as the app component. How ...

javascriptangular