Vis priya Vis priya - 5 months ago 29
jQuery Question

How to do Onclick Button show and Hide in foreach case using jquery or javascript?

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

so it has a bar section when clicked content below will show like,
eg: 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 show down buttun.
it like hiding and showing down and up button with respect to button click.
The problem is i am using a foreach to dispaly items. how to implement scenario?

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


I have given my html above.

Answer
                      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 />
    if(your condition){
                            @Html.Raw(@i.BioDetail) //it will show only if your ncondtion satisfied
                     }
                        </div>
                    </div>
                </div>
            </div>
        }
Comments