search

creativetimofficial / ct-paper-dashboard-pro-angular

8 stars 10 forks source link

collapsible accordion #25

Closed shalvy closed 5 years ago

shalvy commented 5 years ago

How do I make to work this way, say Collapsible Group Item #1 is already collapse, when I click the second item to collapse e.g Collapsible Group Item #2 , Collapsible Group Item #1 or any other collapsed items to un-collapses/closes and only Collapsible Group Item #2 is left collapsed, Help please??

`

`

chelaruc commented 5 years ago

@shalvy you need to change the data-parent="#accordion" to the divs with the class collapse. For example, the first collapsible from Panels page will look like:

<div id="accordion" role="tablist" aria-multiselectable="true" class="card-collapse">
            <h4 class="card-title">Collapsible Accordion</h4>
            <div class="card card-plain">
              <div class="card-header" role="tab" id="headingOne">
                <a data-toggle="collapse" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                  Collapsible Group Item #1
                  <i class="nc-icon nc-minimal-down"></i>
                </a>
              </div>
              <div id="collapseOne" class="collapse show" role="tabpanel" aria-labelledby="headingOne" data-parent="#accordion">
                <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
            <div class="card card-plain">
              <div class="card-header" role="tab" id="headingTwo">
                <a class="collapsed" data-toggle="collapse"href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                  Collapsible Group Item #2
                  <i class="nc-icon nc-minimal-down"></i>
                </a>
              </div>
              <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
                <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
            <div class="card card-plain">
              <div class="card-header" role="tab" id="headingThree">
                <a class="collapsed" data-toggle="collapse" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                  Collapsible Group Item #3
                  <i class="nc-icon nc-minimal-down"></i>
                </a>
              </div>
              <div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordion">
                <div class="card-body">
                  Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
                </div>
              </div>
            </div>
          </div>

All the best, Ciprian

shalvy commented 5 years ago

Hey Ciprian,

Yes thank you, worked exactly as I wanted cheers mate 👍..

thanks, shalvy

On Thu, Oct 25, 2018 at 2:53 PM Chelaru Ciprian notifications@github.com wrote:

@shalvy https://github.com/shalvy you need to change the data-parent="#accordion" to the divs with the class collapse. For example, the first collapsible from Panels page will look like:

Collapsible Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

All the best, Ciprian

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/25#issuecomment-433038555, or mute the thread https://github.com/notifications/unsubscribe-auth/AZrC59v18TCV4p3T9HbH1UIXMt8ZL2wBks5uobQ1gaJpZM4X55jh .

shalvy commented 5 years ago

well what I am trying to do exactly, the html is like this

data from the ts be like this;

options = [ { name: "option1", value: 1 }, { name: "option2", value: 2 }, { name: "option2", value: 3 }, { name: "option2", value: 4 }, { name: "option2", value: 5 }, { name: "option3", value: 6 } ]

data = [ { name: "apple", value: 1 }, { name: "banana", value: 2 } ]

On Fri, Oct 26, 2018 at 5:41 PM shallwin chirigo schirigo@gmail.com wrote:

Hey Ciprian,

Yes thank you, worked exactly as I wanted cheers mate 👍..

thanks, shalvy

On Thu, Oct 25, 2018 at 2:53 PM Chelaru Ciprian notifications@github.com wrote:

@shalvy https://github.com/shalvy you need to change the data-parent="#accordion" to the divs with the class collapse. For example, the first collapsible from Panels page will look like:

Collapsible Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

All the best, Ciprian

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/25#issuecomment-433038555, or mute the thread https://github.com/notifications/unsubscribe-auth/AZrC59v18TCV4p3T9HbH1UIXMt8ZL2wBks5uobQ1gaJpZM4X55jh .

shalvy commented 5 years ago

it worked thanks

On Fri, Oct 26, 2018 at 6:37 PM shallwin chirigo schirigo@gmail.com wrote:

well what I am trying to do exactly, the html is like this

schirigo@gmail.com wrote:

Hey Ciprian,

Yes thank you, worked exactly as I wanted cheers mate 👍..

thanks, shalvy

On Thu, Oct 25, 2018 at 2:53 PM Chelaru Ciprian notifications@github.com wrote:

@shalvy https://github.com/shalvy you need to change the data-parent="#accordion" to the divs with the class collapse. For example, the first collapsible from Panels page will look like:

Collapsible Accordion

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.
Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

All the best, Ciprian

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/creativetimofficial/ct-paper-dashboard-pro-angular/issues/25#issuecomment-433038555, or mute the thread https://github.com/notifications/unsubscribe-auth/AZrC59v18TCV4p3T9HbH1UIXMt8ZL2wBks5uobQ1gaJpZM4X55jh .