14

I am using a accordion for closing and opening content when clicked.

It has a bar section which, when clicked, content below will show like on this example : http://jeevanscientific.com/resources.html

I need to add a up button/downbutton on rightside of each bar.
Once clicked on particular bar only that bar shows down button. It is like hiding and showing down and up button with respect to button click.

The problem is that I am using a foreach to display items. How can I implement this scenario ?

Here is my HTML :

foreach (var i in footerPage.StaticPagePersons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>
                <i class="fa fa-chevron-up table-middle" aria-hidden="true"></i>
                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    @Html.Raw(@i.BioDetail)
                </div>
            </div>
        </div>
    </div>
}

Clarification

right side of each tab.. that's requirement... when clicked should show up button, else down button

1
  • Do I understand correctly that you create a set of accordions with the same id="accordion2"? Does each accordion contain only one panel? Can you show the HTML-code that you get as a result? Commented Jun 27, 2016 at 12:51

6 Answers 6

13
+100
foreach (var i in person.Persons)
{
    <H1>@Html.Raw(@i.Type) </H1>
    <div class="accordion" id="accordion2">
        <div class="accordion-group">
            <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id">
                <i class="fa fa-chevron-down table-middle" aria-hidden="true"></i>

                <h1 class="accordion-toggle table-middle">
                    @Html.Raw(@i.Name)
                </h1>
            </div>
            <div id="@i.Id" class="accordion-body collapse out">
                <div class="accordion-inner">
                    <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
                    <h1>@Html.Raw(@i.Name)</h1>
                    <h3>@Html.Raw(@i.Title)</h3>
                    <br />
                    if(your condition){
                        @Html.Raw(@i.BioDetail) //it will show only if your ncondtion satisfied
                    }
                </div>
            </div>
        </div>
    </div>
}

  <script>
    $(document).ready(function () {
        $('.collapse').on('shown.bs.collapse', function () {
            $(this).parent().find(".fa-chevron-down").removeClass("fa-chevron-down").addClass("fa-chevron-up");
        });

        $('.collapse').on('hidden.bs.collapse', function () {
            $(this).parent().find(".fa-chevron-up").removeClass("fa-chevron-up").addClass("fa-chevron-down");
        });
    });
</script>
4
  • 1
    How does your solution help to change the button depending on the status of the tab? Commented Jun 28, 2016 at 16:45
  • 2
    You have changed the essence of your answer after I made my comment. Up to this point you just have advised to use the if condition. This condition acts at the stage of creating the page. Therefore, it does not help to toggle the button after the page loads. So your old answer did not solve this issue. In this situation, the terse answer to my comment looks unpleasant. Commented Jun 29, 2016 at 14:21
  • 2
    I think she might have meant she has corrected the code to explain how it worked as per your question in the comment above, maybe. Commented Jun 30, 2016 at 8:18
  • 1
    she asked me to do something else, for the actual question i updated the code.
    – user6489054
    Commented Jun 30, 2016 at 11:16
6

You can do this with pure css, if the link above shows a working example.

What you would need is:

.accordion-heading .fa {
  display: none;
  //Other css required for the fa display in general can go here.
}

.AccordionPanelOpen .fa-chevron-up {
  display: block;
}

.AccordionPanelClosed .fa-chevron-down {
  display: block;
}
0
5

The current answer does not really answer your question, I follow the answer of @Arathi, this is done via CSS, when the bootstrap accordion is collapsed or not, it will have an addition class. the <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id"> rule will switch between .collapsed class and off. So When this div has the collapsed class you want to show .fa-chevron-down else you want to show .fa-chevron-up. You can manage this by the following code:

.accordion-header .fa-chevron-down {
  display: block;
}
.accordion-header .fa-chevron-up {
  display: none;
}
.accordion-header.collapsed .fa-chevron-up {
  display: block;
}
.accordion-header.collapsed .fa-chevron-down {
  display: none;
}

Now when the .accordion-header will have the collapsed class the up chevron will show and the down chevron will hide. If you want to add transition or something like that you could also use opacity 0 - 1. Looking forward to your reply.

4

I have a CSS-solution for your issue. And I've noticed several problems in your code.

1) Several problems

  1. Your current code creates a set of accordions with the same id="accordion2". It's wrong. The id must be unique.

  2. Each accordion contains only one panel. This is strange. Accordions have been invented to manage multiple panels.

  3. You've replaced Bootstrap classes. For example, your code uses .accordion-group and .accordion-heading instead of .panel-group and .panel-heading. I need to see your code in order to understand what are the differences between them.

2) How to toggle icons using CSS

Let's start with the standard Accordion example.

You can add FontAwesome icons as a content of the :after pseudo-element:

.panel-title > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
}

Bootstrap uses the aria-expanded attribute for the control element.

The plugin will automatically toggle this attribute based on whether or not the collapsible element has been opened or closed.

So you can toggle icons by CSS:

.panel-title > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}

Please check the demo. Is it what you want to achieve? https://jsfiddle.net/glebkema/1wx4ubvc/

@import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');

.panel-title > a {
  display: block;
  position: relative;
}
.panel-title > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-1">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-1" aria-expanded="false" aria-controls="collapse-1">
          Item 1
        </a>
      </h4>
    </div>
    <div id="collapse-1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-1">
      <div class="panel-body">
          Text 1
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-2">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-2" aria-expanded="false" aria-controls="collapse-2">
          Item 2
        </a>
      </h4>
    </div>
    <div id="collapse-2" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-2">
      <div class="panel-body">
        Text 2
      </div>
    </div>
  </div>
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="heading-3">
      <h4 class="panel-title">
        <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse-3" aria-expanded="false" aria-controls="collapse-3">
          Item 3
        </a>
      </h4>
    </div>
    <div id="collapse-3" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading-3">
      <div class="panel-body">
        Text 3
      </div>
    </div>
  </div>
</div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

3) Try this code

<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">

foreach (var i in footerPage.StaticPagePersons)
{
  <div class="panel panel-default">
    <div class="panel-heading" role="tab" id="[email protected]">
      <h4 class="panel-title">
        <a role="button" data-toggle="collapse" data-parent="#accordion" href="#[email protected]" aria-expanded="false" aria-controls="[email protected]">
          @Html.Raw(@i.Type)
        </a>
      </h4>
    </div>
    <div id="[email protected]" class="panel-collapse collapse" role="tabpanel" aria-labelledby="[email protected]">
      <div class="panel-body">
        <img ng-src="@i.ImagePath" alt="logo" class="img-thumbnail img-wrap content-image" />
        <h1>@Html.Raw(@i.Name)</h1>
        <h3>@Html.Raw(@i.Title)</h3>
        <br />
        @Html.Raw(@i.BioDetail)
      </div>
    </div>
  </div>
}

</div>

And use this CSS:

.panel-title > a {
  display: block;
  position: relative;
}
.panel-title > a:after {
  content: "\f078"; /* fa-chevron-down */
  font-family: 'FontAwesome';
  position: absolute;
  right: 0;
}
.panel-title > a[aria-expanded="true"]:after {
  content: "\f077"; /* fa-chevron-up */
}
3
Try this code jquery :


    $('.accordion-group h1').click(function(){

    $(this).parent('.accordion').find('.accordion-body').slideToggle();

    });


buttons should be like this
<ul>
  <li>button1</li>
  <li>button2</li>
  <li>button3</li>
</ul>


<script>
$(document).ready(function(){
$('li').click(function(){
  var pos =  $( "li" ).index(this);
   $('panel-group panel-body:nth-child('+pos+')').slideToggle();
});
});
</script>
3
  • what i need is toggling of button. everything is working fine. button up and down need to be added by me
    – vkv
    Commented Jun 17, 2016 at 17:45
  • As per your requirement jeevanscientific.com i was given . Button means ? where is it ?
    – srinivas
    Commented Jun 19, 2016 at 2:10
  • right side of each tab.. thats requiremnt... when clicked should show upbutton, else down button
    – vkv
    Commented Jun 19, 2016 at 13:33
2

You can try something like this

jquery .toggle() Display(if the element is hidden) or hide(if the element is displayed) the matched elements. so here when you click on the tag we toggle(show/hide) the element after it that(the glyphicon).

      $('.panel-heading a').click(function(){
        $(this).next('span.glyphicon').toggle();
      })
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css" />


<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
      <div class="panel panel-default">
        <div class="panel-heading" role="tab" id="headingOne">
          <h4 class="panel-title">
            <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
          Collapsible Group Item #1
        </a>
        <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true" style="display: block;"></span>
          </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
          <div class="panel-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="panel panel-default">
        <div class="panel-heading" role="tab" id="headingTwo">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
          Collapsible Group Item #2
        </a>
        <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true" style="display: none;"></span>
          </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
          <div class="panel-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="panel panel-default">
        <div class="panel-heading" role="tab" id="headingThree">
          <h4 class="panel-title">
            <a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
          Collapsible Group Item #3
        </a>
        <span class="glyphicon glyphicon-menu-down pull-right" aria-hidden="true" style="display: none;"></span>
          </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
          <div class="panel-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>

2
  • $(this).next('span.glyphicon').toggle(); why this code is using for? can u expalin?
    – vkv
    Commented Jun 17, 2016 at 17:47
  • in your case no up button is there
    – vkv
    Commented Jun 17, 2016 at 18:22

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.