Switching the icon after the label is clicked

Currently, I am working on the following code snippet:

<GridLayout columns="*, *">
    <Label text="Question" textWrap="true" (tap)="onTap(0)" class="h2 que" col="0"></Label>
    <Label class="fas h1 icon" text="&#xf107;" col="2" colSpan="3"></Label>
    <Label class="fas h1 icon" text="&#xf107;" col="2" colSpan="3"></Label>
</GridLayout>

Accompanied by its respective .ts:

import { Component, OnInit } from '@angular/core';
import { RadSideDrawer } from 'nativescript-ui-sidedrawer'
import { Application } from '@nativescript/core'
@Component({
    selector: 'faqs',
    templateUrl: './faqs.component.html',
    styleUrls: ['./faqs.component.css']
})

export class FaqsComponent implements OnInit {
    isToggled = [false, false, false, false]
    constructor() { }

    ngOnInit() { }

    onDrawerButtonTap(): void {
        const sideDrawer = <RadSideDrawer>Application.getRootView()
        sideDrawer.showDrawer()
    }

    onTap(index: number) {
        this.isToggled.fill(false, 0)
        this.isToggled[index] = !this.isToggled[index]
    }
}

I would like the

<Label class="fas h1 icon" text="&#xf108;" col="2" colSpan="3"></Label>
to be displayed when the
<Label text="Question" textWrap="true" (tap)="onTap(0)" class="h2 que" col="0"></Label>
is tapped, similar to how an accordion works. Thank you in advance for any help provided!

Answer №1

To display the Labels conditionally, consider using the *ngIf directive. In this example, the isToggled array is used to bind to the *ngIf. You can modify the condition based on your onTap event.

<GridLayout columns="*, *">
  <Label text="Question" textWrap="true" (tap)="onTap(0)" class="h2 que" col="0"></Label>
  <Label *ngIf="isToggled[0]" class="fas h1 icon" text="&#xf107;" col="2" colSpan="3"></Label>
  <Label *ngIf="isToggled[1]" class="fas h1 icon" text="&#xf108;" col="2" colSpan="3"></Label>
</GridLayout>

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

The functionality of Bootstrap styles is not compatible with Code Igniter

I tried placing the bootstrap folder in the root folder and loading the styles in the header section of view files like this. Unfortunately, it didn't work as expected. Can someone please assist me in solving this issue? <link href="<?php e ...

Challenge with shifting list items

The issue arises when applying margin to any element within the product or slider div, causing all list items to shift downwards. .product-slider { margin-top: 16px; text-align: center; } .slide-item { list-style-type: none; display: inline; ...

When the window size is minimized, containers are colliding with each other

On smaller window sizes or certain small screen phones, the buttons are overlapping the heading. Take a look at the code below: <style> body { font-family: Arial, Helvetica, sans-serif; } .x2 { position: absolute; left: 50%; top: 50%; tran ...

Every DIV is filled with HTML and CSS

My navigation bar currently has icons placed at the center of a DIV, but I would like to fill up the entire DIV without any spaces left on the sides. The HTML code for the DIV containing the icons is as follows: <nav class="navbar navbar-expand navbar ...

Personalized navigation bar color while hovering in Bootstrap

I can't seem to figure out the right CSS syntax to customize my navbar links when hovering. Here is my navbar structure: <ul class="nav navbar-nav navbar-right"> <li><%= link_to "Home", root_path %></li> <li cla ...

When using the table-layout=fixed attribute in IE7, if one column does not have a specified width property, the table's width will

Is there a way to make a table render with minimal width based on its content? I'm facing an issue with IE7 where it insists on expanding the table to 100% width. The code snippet below works fine in Firefox and IE8, but not in IE7: <!DOCTYPE HTM ...

When navigating back, the Bootstrap Multistep Form breaks down

Tools I'm currently utilizing: HTML, CSS, Javascript, Bootstrap 3 Library / Package in use: https://codepen.io/designify-me/pen/qrJWpG Hello there! I am attempting to customize a Codepen-based Bootstrap Multistep Form from the provided link abov ...

Craft unique looks for both even and odd Tumblr posts

I recently came up with a unique idea for a Tumblr theme where the design of posts changes based on whether they are even or odd in the sequence. While I have experience with basic HTML coding, delving into Tumblr customization is new to me. Here's wh ...

What is the best way to horizontally align a floated image with its text positioned at the bottom?

I centered the images inside the "main-content" class, but I'm unsure if I did it correctly. Now, I also want to center the text, but using margin affects the images as well. Apologies for the messy code, I'm just a beginner. Below is the HTML5 ...

Website image container for optimal responsiveness

I recently started using Bootstrap 5 to build a new website and I encountered an issue with the layout of my feature and mission sections. I wanted the images to move above the text when the viewport is scaled down to mobile or tablet size, but I wasn&apos ...

Applying the `float: left` property to elements while utilizing 100% width through percentages

In my current project, I have a situation where there is an HTML img#logo-image. Occasionally, this image does not display due to display:none. The issue arises when trying to ensure that the entire div#menu-title fits within the width of the page. I atte ...

Could really use a hand getting this card grid to be more responsive

Recently, I delved into using HTML & CSS for work. However, I encountered a major hurdle: creating responsive Grid card elements. I have four card elements in a column, each with text that increases opacity when hovering over the card. When viewed on a t ...

What is the best way to add spacing between items in an unordered list using HTML and CSS?

I have put together a list that I want to display with lines in between each word... here's the progress so far: #header { position: absolute; width: 100%; } #navbar { position: relative; padding-top: 0.8em; padding-left: 31em; } ul { l ...

The main-panel div's width increase is causing the pages to extend beyond the window's width limit

I recently downloaded a Reactbootstrap theme and managed to integrate it with NextJS successfully. However, I am facing an issue where my <div className="main-panel"> in the Layout.js is extending slightly beyond the window. It seems like t ...

Mac users may experience lag when using Javascript parallax effects

I created a parallax page where the background image changes using JavaScript translateY(- ... px)' similar to what you see on the firewatch website. On Windows, the parallax effect works smoothly. However, on macOS it is smooth only in Safari. All ...

Tips for centering the second content within a div block

<div style="height: 100%; background: red"> <div style="height: 100px; background: green"> </div> <div style="background: blue;"> <h1>Content</h1> </div> </di ...

What are the guidelines for deciding between bootstrap 4 classes and creating my own CSS?

As a new programmer delving into the world of bootstrap 4, I'm faced with styling a footer column heading in two distinct ways. The first method involves modifying the CSS file, such as: .footer-heading-text { text-transform: uppercase; font-wei ...

Jquery deactivates the CSS hover effect

Having a dilemma with linked photos on my website. I have set their opacity to 0.45 by default, but want them to change to full opacity (1) when hovered over or clicked. I've implemented a JQuery function that resets the rest of the photos back to 0.4 ...

Why is the CSS border not activating on hover in Chrome?

When using the mouseover function in Google Chrome, the border bottom is not disappearing as expected. However, this works fine in Firefox and IE. Interestingly, removing border-collapse: collapse fixes the issue. What could be causing this? Is there a sol ...

Creating sleek flat buttons using WebixWould you like to learn how to

From what I've observed, the default buttons in webix appear a certain way. In a demo, I noticed "flat" type buttons that look different: Is there a way to customize my navigation buttons to look like that? I couldn't find any information about ...