The expand button vanishes as soon as the collapse occurs

In the code snippet provided, there is a button in each row that serves two functions: expanding and collapsing the specific row where the button is located.

<div class="">
    <ul>
        <li
          ng-repeat="nav in ciRelationshipHierarchyBySection track by $index"
          style="background:none; padding:0 10px;margin:5px;"
          class="nav nav-list panel-collapse collapse in"
          id="networkDevicesCollapsePanel_{{$index}}"
        >
            <div
              ng-show="ciAttributesCount"
              id="collapsebutton_{{$index}}"
              data-toggle="collapse"
              data-target="#networkDevicesCollapsePanel_{{$index}}"
              class="nodisp expandcollapse no-print">
                <i class="glyphicon glyphicon-minus"></i>Collapse/expand
            </div>
            <a
              style="cursor:pointer; padding: 2px 12px;"
              ng-click="showNetworkDevices(nav.IdentificationSourceId)">
                {{nav.IdentifySourceName}}
            </a>
            <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
            <br />
            <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
            <br />
            <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
            <br />
        </li>
    </ul>
</div>

The challenge I am facing is that when collapsing a row, the button within that row also collapses and becomes invisible for expansion. How can this issue be resolved?

Below are the click events for the buttons:

$("#expandbutton1").hide();

        $("#expandbutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').addClass('in').css("height", "");
            $("#expandbutton1").hide();
            $("#collapsebutton1").show();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-plus-square-o").addClass("fa-minus-square-o");
            });
        });

        $("#collapsebutton1").click(function () {
            $('#networkDevicesLinks div.panel-collapse').removeClass('in');
            $("#expandbutton1").show();
            $("#collapsebutton1").hide();

            $('a[data-toggle="collapse"]').each(function (index) {
                $(this).find("i").removeClass("fa-minus-square-o").addClass("fa-plus-square-o");
            });
        });
    });

Answer №1

It is recommended to include the collapsible panel within the inner elements of the li element:

<ul>
    <!-- If needed, remove any content that could cause the li element to collapse -->
    <li
      ng-repeat="nav in ciRelationshipHierarchyBySection track by $index"
      style="background:none; padding:0 10px;margin:5px;"
      class="nav nav-list"
    >
        <div
          ng-show="ciAttributesCount"
          id="collapsebutton_{{$index}}"
          data-toggle="collapse"
          data-target="#networkDevicesCollapsePanel_{{$index}}"
          class="nodisp expandcollapse no-print">
            <i class="glyphicon glyphicon-minus"></i>Collapse/expand
        </div>
        <!-- Include the new collapsible section inside the li element -->
        <div
          class="panel-collapse collapse in"
          id="networkDevicesCollapsePanel_{{$index}}"
        >
            <a
              style="cursor:pointer; padding: 2px 12px;"
              ng-click="showNetworkDevices(nav.IdentificationSourceId)">
                {{nav.IdentifySourceName}}
            </a>
            <span style="padding: 2px 12px;">Source Id: {{nav.IdentificationSourceId}}</span>
            <br />
            <span style="padding: 2px 12px;">Data Source: {{nav.DataSource}}</span>
            <br />
            <span style="padding: 2px 12px;">Create New: {{nav.IsCreateNew}}</span>
            <br />
        </div>
    </li>
</ul>

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

What is the best way to specify attributes such as font size and padding for the mobile version in AMP for email?

I attempted to utilize media queries to create a responsive AMP email, but it seems that this feature is not supported in AMP. However, I discovered that you can define media="(max-width: 599px)" and media="(min-width: 600px)" for </amp-img>, but the ...

Using POST to submit a form containing the <keygen> element in AngularJS

Today marks my first attempt at submitting a form in AngularJS using a POST Http Request. This particular form contains a unique element that generates a key, as shown below: <keygen id="spkac" name="spkac" challenge="randomchars" keytype="rsa" hidden& ...

Is there a way to create a spinning slot machine animation using CSS3 and jQuery?

I'm currently working on a demo application that will randomly choose a venue when a user clicks a button. My goal is to have the selected venues scroll through with a slot machine spinning animation created using CSS3 and jQuery. Initially, I consid ...

Using PHPMailer to send an HTML page via email

I am attempting to email this HTML page using unlayer.com. I have tried using $mail->isHtml(true), ... msgHtml... but the email client keeps showing the code instead of the HTML page. Any suggestions on how to fix this? Here is my code: $sql = "SE ...

A crisscrossing dashed design running along the edges of the text block

<div class="search"> <p>SEARCH</p> </div> https://i.sstatic.net/yxOga.png I am attempting to incorporate a dashed lateral padding similar to the one shown in the image, but only on the sides of the text. Is there a method I can ...

Tips for placing a button beside text in a modal header with bootstrap

I am working on a modal header and trying to position the "download" button next to the text "Optimize data". Despite my efforts, the button always ends up below the modal header text. I have experimented with float and align properties, but haven't b ...

Exploration of features through leaflet interaction

Attempting to plot bus routes on a map using leaflet with geojson for coordinates. Facing issues with making the bus line bold when clicked, and reverting the style of previously clicked features back to default. Current Progress function $onEachFeature( ...

Ways to align the content in the middle of a div with CSS

My website is functioning perfectly on large devices, but I am facing an issue when trying to center the icon below the slider on mobile devices. I have used the following code in the icn class: .icn{ margin:0 auto; } However, the icon is not centered as ...

index.html: using jquery for selecting colors

I attempted to integrate a jQuery plugin into my application, but it doesn't seem to be working. In the head section of my code, I have included: <link rel="stylesheet" media="screen" type="text/css" href="./style/colorpicker.css" /> <script ...

Explore bar with search button

I'm facing an issue with the code I have for searching on my website. Currently, when a user fills in their search word and presses enter, it executes the command. However, I would like to only run the search script when the user clicks a button inste ...

SoundCloud authentication failed because the sign-in callback is attempting to access a frame from a different origin

Latest SoundCloud SDK Version About a year ago, I successfully registered my App. To my surprise, today I found that the SoundCloud (SC) sign-in feature is no longer working. Upon clicking the button, a SC pop-up window appears with the message "Allow ...

How to centrally align text in list items using Bootstrap 5

Incorporating Bootstrap 5 into my project, I am facing a challenge with vertically aligning text in an li element. Despite trying various techniques mentioned in the Bootstrap documentation for middle/center alignment, none of them seem to be effective. I ...

Is it possible to establish a link to a Socket.IO using a C++ program?

We are currently working on a student project where my teammate needs to establish a connection with me through a socket. I am running an HTML5 webpage and separately setting up a Socket.IO server. On his end, he is running a C++ program that scans RFIDs a ...

The data within an isolated scope is failing to appear in the template of the directive

I am currently working on a custom Angular directive that is designed to showcase pagination throughout my application. Despite using an isolated scope to pass the parameter totalNoOfRecords, I am facing issues with it not being displayed. Any assistance ...

AngularJS ng-repeat items do not properly align when utilizing Bootstrap col-md-2 styles

Utilizing AngularJS ng-repeat for displaying a list of products and incorporating bootstrap col-md-2 to showcase 6 products in each row, I have included a condensed version of my code below: <!DOCTYPE html> <html lang="en"> <head> <ti ...

How can I bind Angular to the selection of a file input field?

I am facing an issue with my upload form where the displayed filename is showing a virtual filepath instead of just the filename itself. How can I improve the binding to only display the filename (like selected.files[0].name) without any virtual path? My ...

What is the reason behind Internet Explorer 11 not supporting conditional comments in HTML? Has this feature been dropped?

I'm having an issue trying to show different content on various web browsers. When using Internet Explorer 11 and Google Chrome 39, the message displayed is "Not Internet Explorer" instead of the expected result. Is there a problem with my code? It&ap ...

Only render the div content in jQuery when the user has made a selection

Looking to optimize my website by incorporating tabs with a large amount of HTML content without slowing down the page load. Is there a way to use jQuery to load the div content only when each tab is selected? The basic structure of the HTML code would be ...

Creating an AngularJS application that can run without the need for a

Being new to AngularJS, I have a question about its functionality. As Angular is a client-side framework, it should work without a web server. However, the following code snippet doesn't seem to function correctly: <!doctype html> <html ng-a ...

directive that is programmatically inserted into an AngularJS application

Currently, I am working on a custom directive that needs to include an ng-click attribute to the element. Despite my attempts to add the ng-click directive in various sections such as compile function, pre and post link functions, I am facing issues wher ...