2
Answers

Only 1st card expanding when clicked on other card link

Akash Patel

Akash Patel
6y
507
1
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
  1. @using NiyaSpa.Models  
  2. @model Tuple<Booking, Customer>  
  3. <div class="inner-agile-w3l-part-head">  
  4. <h2 class="w3l-inner-h-title">Facials</h2>  
  5. </div>  
  6. <div>  
  7. <p style="text-align:center; font-size:medium;">  
  8. 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.  
  9. </p>  
  10. </div>  
  11. <br />  
  12. <br />  
  13. <div class="accordion md-accordian" id="accordEx" role="tablist" >  
  14. </div>  
  15. <div class="row">  
  16. <div class="card-deck">  
  17. @foreach (var facialservices in ViewBag.subServices as IEnumerable<SubService>)  
  18. {  
  19. <div class="col-md-4" style="margin-bottom:20px;">  
  20. <!-- Card -->  
  21. <div class="card promoting-card">  
  22. <!-- Card content -->  
  23. <div class="card-body d-flex flex-row">  
  24. <!-- Avatar -->  
  25. <!-- Content -->  
  26. <div>  
  27. <!-- Title -->  
  28. <h4 class="card-title font-weight-bold mb-2">@facialservices.Sub_ServiceName </h4>  
  29. <!-- Subtitle -->  
  30. </div>  
  31. </div>  
  32. <!-- Card image -->  
  33. <div class="view overlay">  
  34. <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">  
  35. <a href="#!">  
  36. <div class="mask rgba-white-slight"></div>  
  37. </a>  
  38. </div>  
  39. <!-- Card content -->  
  40. <div class="card-body">  
  41. <div class="collapse-content">  
  42. <!-- Text -->  
  43. <p class="card-text collapse" id="collapseContent">@facialservices.Description </p>  
  44. <!-- Button -->  
  45. <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>  
  46. </div>  
  47. </div>  
  48. </div>  
  49. <!-- Card -->  
  50. </div>  
  51. }  
  52. </div>  
  53. </div>  
Answers (2)
Next Recommended Forum