Link to home
Start Free TrialLog in
Avatar of sirbounty
sirbountyFlag for United States of America

asked on

Collapse/toggle not working as desired

This is the behavior I'm hoping to accomplish - is it possible?

Existing data is displayed when the page is first visited.  That link will allow toggling (works).
But if the New button is clicked, I want that to collapse (works).
Ideally, I'd rather if the New button was clicked a subsequent time, that it wouldn't open the Existing link - only collapse it when New isn't displayed so that New is the only card shown.
I also want that if Existing is clicked, that it will expand if collapsed...Currently, it does expand, but the title (span) disappears!. :(
I certainly don't want that, but I cannot see what is causing that.

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <title>List Manager</title>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    />
    <link
      rel="stylesheet"
      href="https://use.fontawesome.com/releases/v5.8.2/css/all.css"
    />

    <style type="text/css">
      .jumbotron {
        padding: 2rem 1rem;
        background-color: #7d3f98 !important;
      }
    </style>
  </head>

  <body>
    <div class="row justify-content-center">
      <div class="col-8 mx-2 pt-4">
        <div class="jumbotron text-center">
          <h1 class="text-white">BD Manager</h1>
        </div>
      </div>
      <div class="col-3 pt-5">
        <button id="info" class="btn btn-warning ng-binding btn-lg mb-3">
          &raquo; Learn More &laquo;
        </button>
        <button
          id="newButton"
          class="btn btn-success btn-lg"
          data-toggle="collapse"
          data-target="#newList"
        >
          &raquo;&nbsp;Create New&nbsp;&laquo;
        </button>
      </div>
    </div>
    <hr />

    <div class="container">
      <div class="row">
        <div class="mx-3 col-sm-8">

          <div class="card collapse" id="newList">
            <div class="card-body">
              <h3 class="card-title">Create New</h3>
              <p class="card-text">
                Fill out the following information to create a new list.
                <span class="font-weight-bold text-uppercase">Bold</span> items
                are mandatory.
              </p>
              <hr />
            </div>
            <div class="btn btn-success btn-block">CREATE</div>
          </div>
          <div class="row mb-3"></div>

          <!-- Existing card -->
          <div
            class="accordion md-accordion accordion-blocks"
            id="currentList"
            role="tablist"
            aria-multiselectable="true"
            runat="server"
          >
            <div class="card">
              <div class="card-header">
                <a
                  id="listData"
                  data-toggle="collapse"
                  data-parent="#currentList"
                  href="#collapseLink"
                  aria-expanded="true"
                  aria-controls="collapseLink"
                >
                  <h5 class="mt-1 mb-0">
                    <span>Existing List</span>
                  </h5>
                </a>
              </div>
              <div
                id="collapseLink"
                class="collapse show"
                data-parent="#currentList"
              >
                <div class="card-body">
                  <div class="table-responsive mx-3">
                    <table class="table table-hover mb-0">
                      <thead>
                        <tr>
                          <th class="th-lg">
                            <a>ID<i class="fas fa-sort ml-1"></i></a>
                          </th>
                          <th class="th-lg">
                            <a>Display Name<i class="fas fa-sort ml-1"></i></a>
                          </th>
                          <th class="th-lg">
                            <a>Expires<i class="fas fa-sort ml-1"></i></a>
                          </th>
                          <th></th>
                        </tr>
                      </thead>

                      <tbody>
                        <tr>
                          <td>123</td>
                          <td>
                            My list
                          </td>
                          <td>12.06.2021</td>
                          <td>
                            <a
                              ><i
                                class="fas fa-info mx-1"
                                data-toggle="tooltip"
                                data-placement="top"
                                title="Tooltip on top"
                              ></i
                            ></a>

                            <a><i class="fas fa-edit mx-1"></i></a>
                            <a><i class="fas fa-trash mx-1"></i></a>
                          </td>
                        </tr>
                      </tbody>
                    </table>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>

    <script type="text/javascript">
      $('#newButton').click(function() {
        $('#listData').collapse('toggle');

        // $("#currentList").collapse('toggle');
      });
    </script>
  </body>
</html>

Open in new window

Avatar of sirbounty
sirbounty
Flag of United States of America image

ASKER

*Update - changing the collapse option to 'hidden' seems to sort the first issue.
Now if I can just keep that span from disappearing.

Clicking the span/link does toggle as expected.
The issue appears once the button is clicked.  Thereafter any click on the link causes the span/title to disappear.  So I suspect it's something in my function that needs to be altered.
Not 100% sure what I am looking for.

Page opens with
Existing List: Clicking that toggles the list

Create New (click) => toggles the create new panel above existing list
Create New (click) => second time hides everything
Create New (click) => third time restores everything

Existing List (click) => Shows list but hides Existing

Question - what is it you are expecting the jQuery at the bottom of your script is meant to do?

 
$('#newButton').click(function() {
  $('#listData').collapse('toggle'); // <===== PROBLEM IS HERE
  // $("#currentList").collapse('toggle');
});

Open in new window


Remove that script and it should work
I want that upon first visit the Existing is displayed expanded.
Everytime Existing link is clicked, it toggles.
When new is clicked, I want Existing collapsed and New displayed.
I don't envision Create being a toggle button, but I understand that may happen.  I would rather that only toggle Create being visible or not and Existing collapsing when it is displayed.

The biggest issue I have is I do not want the Existing link to disappear when clicked.  The list expands when clicked, but afterwards I have no control over expanding or collapsing that section.  Seems to be a bug but maybe I'm just not understanding something...
Then just make your JavaScript at the bottom of the page this
    <script type="text/javascript">
      $('#newButton').click(function() {
		$('#currentList').toggle();
      });
    </script>

Open in new window

I'd tried the toggle method already.
Here's what happens with that change:

Click Existing - it toggles as desired.
Click New, the new section appears, but the Existing link disappears and the existing section is still displayed.
There is now no way to collapse nor expand the existing list...
For whatever reason - this appears to work as desired:
 $('#newButton').click(function() {
        $('#currentList').collapse({
          toggle: false
        });
      });

Open in new window

Well no, that's not quite it either.  It doesn't seem to collapse the list.  
Ugh - this is frustrating...  I'll keep trying.
setting toggle to true works as expected.
HOWEVER, I still have the issue with the Existing link disappearing if I have clicked New at some point and later click the existing link.
Looking at the source, the span is still present, so I'm not sure why that text/link disappears.
I've now tried removing the <h5> and <span> elements - just displaying the text for the link.  It still disappears.
I've drive altering the anchor to a div with a button class - same results.
:(
Then I am not clear on what you are trying to achieve.

I understood that the New button toggles the Create New on and off and at the same time toggles the Existing on and off such that only one of them shows at a time.

When Existing is clicked it toggles the grid on and off.

The code I posted achieves that - if that is not the requirement then I need further instructions.
I want the toggle. I do not want the existing link to disappear.
If I click new then the next attempt to toggle existing causes the link to disappear. At that point the only costing group is useless because I can never toggle again.
SOLUTION
Avatar of Julian Hansen
Julian Hansen
Flag of South Africa image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
That behaves about like I’d want. Although I wouldn’t want existing to disappear, just collapse.

Mine however doesn’t respond that way.
ASKER CERTIFIED SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
So if the new button has show, then you're adding it to collapseLink, otherwise removing it?  Am I reading that right?
SOLUTION
Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for the help.
You are welcome.