TECHNOLOGIES
FORUMS
JOBS
BOOKS
EVENTS
INTERVIEWS
Live
MORE
LEARN
Training
CAREER
MEMBERS
VIDEOS
NEWS
BLOGS
Sign Up
Login
No unread comment.
View All Comments
No unread message.
View All Messages
No unread notification.
View All Notifications
Answers
Post
An Article
A Blog
A News
A Video
An EBook
An Interview Question
Ask Question
Forums
Monthly Leaders
Forum guidelines
Akash Patel
NA
117
40.1k
Only 1st card expanding when clicked on other card link
Feb 13 2019 4:42 AM
I am working on a web application. I have a view in which there are cards three in a row. All the data is retrieved from database and bind using loop in view. There is a link named "read more" in each card in which when clicked expands it down showing more content.The problem is when click on link of other cards only 1st card is expanded and other cards aligns to right sides and not move down. Please help it out. Below is the code of the view
@using NiyaSpa.Models
@model Tuple<Booking, Customer>
<div
class
=
"inner-agile-w3l-part-head"
>
<h2
class
=
"w3l-inner-h-title"
>Facials</h2>
</div>
<div>
<p style=
"text-align:center; font-size:medium;"
>
We provide skin specific facials as listed below. Each contains 5-8 step treatments including cleansing, chemical or physical exfoliation, gel treatment, steam facial, toning and moisturizing. Our blood circulating facial massage allows products to absorb deep into the skin giving clients
long
lasting results.
</p>
</div>
<br />
<br />
<div
class
=
"accordion md-accordian"
id=
"accordEx"
role=
"tablist"
>
</div>
<div
class
=
"row"
>
<div
class
=
"card-deck"
>
@foreach (
var
facialservices
in
ViewBag.subServices as IEnumerable<SubService>)
{
<div
class
=
"col-md-4"
style=
"margin-bottom:20px;"
>
<!-- Card -->
<div
class
=
"card promoting-card"
>
<!-- Card content -->
<div
class
=
"card-body d-flex flex-row"
>
<!-- Avatar -->
<!-- Content -->
<div>
<!-- Title -->
<h4
class
=
"card-title font-weight-bold mb-2"
>@facialservices.Sub_ServiceName </h4>
<!-- Subtitle -->
</div>
</div>
<!-- Card image -->
<div
class
=
"view overlay"
>
<img
class
=
"card-img-top rounded-0"
height=
"100%"
width=
"100%"
src=
"https://mdbootstrap.com/img/Photos/Horizontal/Food/full page/2.jpg"
alt=
"Card image cap"
>
<a href=
"#!"
>
<div
class
=
"mask rgba-white-slight"
></div>
</a>
</div>
<!-- Card content -->
<div
class
=
"card-body"
>
<div
class
=
"collapse-content"
>
<!-- Text -->
<p
class
=
"card-text collapse"
id=
"collapseContent"
>@facialservices.Description </p>
<!-- Button -->
<a
class
=
"btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed"
data-toggle=
"collapse"
href=
"#collapseContent"
aria-expanded=
"false"
aria-controls=
"collapseContent"
>Read More</a>
</div>
</div>
</div>
<!-- Card -->
</div>
}
</div>
</div>
Reply
Answers (
2
)
i cant input more than 4 values in a tsxtbox, why?
Razor page in many paging problem