Как сделать отображение кнопки Onclick и скрыть в случае foreach с использованием jquery или javascript?

Ответ 1

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>

Ответ 2

Вы можете сделать это с помощью чистого css, если приведенная выше ссылка показывает рабочий пример.

Что вам нужно:

.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;
}

Ответ 3

Текущий ответ на самом деле не отвечает на ваш вопрос, я следую ответу @Arathi, это делается через CSS, когда бутстрап-аккордеон рухнул или нет, у него будет класс добавления. правило <div class="accordion-heading datalist" id="" data-toggle="collapse" data-parent="#accordion2" href="#@i.Id"> будет переключаться между .collapsed классом и выключено. Итак, когда этот div имеет класс collapsed, вы хотите показать .fa-chevron-down else, который вы хотите показать .fa-chevron-up. Вы можете управлять этим с помощью следующего кода:

.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;
}

Теперь, когда .accordion-header будет иметь класс collapsed, появится шеврон вверх, а нижний шеврон скроется. Если вы хотите добавить переход или что-то подобное, вы также можете использовать opacity 0 - 1. С нетерпением ждем вашего ответа.

Ответ 4

У меня есть CSS-решение для вашей проблемы. И я заметил несколько проблем в вашем коде.

1) Несколько проблем

• Ваш текущий код создает набор аккордеонов с тем же id="accordion2". Это неправильно. id должен быть уникальным.

• Каждый аккордеон содержит только одну панель. Это странно. Аккордеоны были изобретены для управления несколькими панелями.

• Вы заменили классы Bootstrap. Например, ваш код использует .accordion-group и .accordion-heading вместо .panel-group и .panel-heading. Мне нужно увидеть ваш код, чтобы понять, каковы различия между ними.

2) Как переключать значки с помощью CSS

Начнем со стандартного Аккордеонного примера.

Вы можете добавить значки FontAwesome в качестве содержимого псевдоэлемента :after:

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

Bootstrap использует атрибут aria-expanded для элемента управления.

Плагин автоматически переключит этот атрибут на основе того, открыт или закрыт складной элемент.

Итак, вы можете переключать значки с помощью CSS:

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

Пожалуйста, проверьте демо. Это то, чего вы хотите достичь? 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>

Ответ 5

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>

Ответ 6

Вы можете попробовать что-то вроде этого

jquery . toggle() Отобразить (если элемент скрыт) или скрыть (если элемент отображается) согласованные элементы. поэтому здесь, когда вы нажимаете тег , мы переключаем (показываем/скрываем) элемент после него (глификон).

      $('.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="#" onclick="location.href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.css'; return false;" />


<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>