'Show more and less button with flask data using bootstrap/html/css
I am trying to create a viewmore section in my flask application (ideally with bootstrap). Right now I have a review box in HTML that displays 5 different 5 star ratings for different sections (all data is fetched from a database using flask and displayed using jinja), I then want to have a view more button at the end of each review box that once clicked will display comments made for different questions.
I have tried examples online however the code from these examples if I press "view more", it shows the content for all the review boxes not just the one you clicked view more for, and same if you press view less. Does anyone know how I can do this?
styles.css
/* REVIEW BOXES */
#reviews{
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
width: 100%;
}
.review-box-container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
width: 100%;
}
.review-box{
width: 500px;
padding: 20px;
overflow: hidden;
margin: 15px;
cursor: pointer;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
<script type="text/javascript" src="{{ url_for('static', filename='index.js') }}"></script>
<meta name="description" content="Artefact produced by Group 10 from the University of Lincoln, to show the analysis of University related data">
<meta name="author" content="TSE Group 10">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<!-- Font awesome -->
<script src="https://kit.fontawesome.com/2b30f58ae7.js" crossorigin="anonymous"></script>
</head>
<body>
<section id="reviews">
<div class="review-box-container">
<!-- Get all the data from postgres database-->
{% for review in reviews.items %}
<div class="review-box">
<div class="box-top">
<div class="profile">
<div class="profile-img">
<img src="{{ url_for('static', filename='images/Lincoln-Logo.png') }}" width="50" height="50" alt="profile">
</div>
<div class="name-user">
<strong>{{ review.course }}</strong>
<span> {{ review.date.strftime('%Y-%m-%d') }}</span>
</div>
</div>
<!-- Overall rating star display-->
<div class="review-content">
<b>Overall Rating</b>
{% for x in range(0, review.overall_rating) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for x in range(0, 5 - review.overall_rating) %}
<i class="far fa-star"></i> <!-- Holo star -->
{% endfor %}
</div>
<!-- Job prospects rating -->
<div class="review-content">
<b>Job Prospects</b>
{% for x in range(0, review.job_prospects_rating) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for x in range(0, 5 - review.job_prospects_rating) %}
<i class="far fa-star"></i>
{% endfor %}
</div>
<!-- Course lecturer rating -->
<div class="review-content">
<b>Course & Lecturer</b>
{% for x in range(0, review.course_lecturer_rating) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for x in range(0, 5 - review.course_lecturer_rating) %}
<i class="far fa-star"></i>
{% endfor %}
</div>
<!-- Facilities rating -->
<div class="review-content">
<b>Facilities</b>
{% for x in range(0, review.facilities_rating) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for x in range(0, 5 - review.facilities_rating) %}
<i class="far fa-star"></i>
{% endfor %}
</div>
<!-- Student Support rating -->
<div class="review-content">
<b>Student Support</b>
{% for x in range(0, review.student_support_rating) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for x in range(0, 5 - review.student_support_rating) %}
<i class="far fa-star"></i>
{% endfor %}
</div>
<!-- Local Life rating -->
<div class="review-content">
<b>Local Life</b>
{% for x in range(0, review.local_life_rating) %}
<i class="fas fa-star"></i>
{% endfor %}
{% for x in range(0, 5 - review.local_life_rating) %}
<i class="far fa-star"></i>
{% endfor %}
</div>
</div>
<!-- View more section here, when clicked shows the below content -->
<b>What do you like about the facilities?</b>
<p>{{ review.facilities_desc}}<p>
<b>What do you like about the local-life?</b>
<p>{{ review.local_life_desc}}<p>
</div>
{% endfor %}
</div>
</section>
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|