From f050c1f2023289e89ac006d76b944157747fcd1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Benjamin=20V=C3=B6lkl?= <benjamin.voelkl@areya.de>
Date: Thu, 16 Sep 2021 17:49:52 +0200
Subject: [PATCH] added faq accordion

---
 content/lists/faq.blade.php | 73 +++++++++++++++----------------------
 css/app.css                 |  6 +++
 2 files changed, 35 insertions(+), 44 deletions(-)

diff --git a/content/lists/faq.blade.php b/content/lists/faq.blade.php
index 3241ef1..e93588e 100644
--- a/content/lists/faq.blade.php
+++ b/content/lists/faq.blade.php
@@ -29,57 +29,43 @@
         <section>
             <div class="row">
 
-                <div class="col-lg-12">
+                <div class="col-12">
 
 
+                    <div class="accordion" id="accordionExample">
+                        @foreach($nachrichten as $nach)
 
-                    @foreach($nachrichten as $nach)
-
-
-                        <div class="col-12 col-md-4" style="padding-bottom: 1rem;">
-                            <div class="card" style="background-color: #f8f8f8;">
-                                @if ($nach->image)
-                                    <img class="rounded-top img-fluid" src="{{ asset('uploads/' . $nach->image) }}">
-                                @else
-                                    <img class="rounded-top img-fluid" src="{{ asset('template/images/konradenhof-placeholder.jpg') }}">
-
-                                @endif
-                                <div class="card-body">
-                                    <div class="row">
-
-
-
-                                        <div class="col-12">
-                                            <h5 class="card-title" style="margin-top: 20px;">
-                                                <a href="{{ route_content($nach) }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$nach->title}}'});">
-                                                    {{$nach->title}}
-                                                </a>
-                                            </h5>
-                                        </div>
-                                        <div class="col-12">
-                                            <small class="card-subtitle mb-2 text-muted" title="{{date('d.m.Y', strtotime($nach->created_at))}}">  {{ $nach->created_at->diffForHumans() }}</small>
-                                        </div>
-                                        <div class="col-12 mt-2">
-
-                                            Lorem ipsum dolor sit amet, consectetur adipisicing elit. A asperiores consectetur consequuntur, eos exercitationem itaque iusto modi quibusdam quidem quisquam quos sunt voluptas voluptate! Architecto deleniti magni nulla possimus quaerat!
-                                        </div>
-
-                                        <div class="col-12 col-lg-12 text-end ">
-                                            <br>
-                                            <a class="btn btn-sm btn-ci" href="{{ route_content($nach) }}" onclick="gtag('event', 'See Job', {'event_category' : 'Home', 'event_label' : '{{$nach->title}}'});">
-                                                Mehr lesen
-                                                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-chevron-right" viewBox="0 0 16 16">
-                                                    <path fill-rule="evenodd" d="M4.646 1.646a.5.5 0 0 1 .708 0l6 6a.5.5 0 0 1 0 .708l-6 6a.5.5 0 0 1-.708-.708L10.293 8 4.646 2.354a.5.5 0 0 1 0-.708z" />
-                                                </svg>
-                                            </a>
-                                        </div>
+                            <div class="accordion-item">
+                                <h2 class="accordion-header" id="heading{{$nach->id}}">
+                                    <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$nach->id}}" aria-expanded="true" aria-controls="collapse{{$nach->id}}">
+                                        {{$nach->title}}
+                                    </button>
+                                </h2>
+                                <div id="collapse{{$nach->id}}" class="accordion-collapse collapse" aria-labelledby="heading{{$nach->id}}" data-bs-parent="#accordionExample">
+                                    <div class="accordion-body">
+                                        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
                                     </div>
                                 </div>
                             </div>
-                        </div>
+                        @endforeach
+
+
+
+                    </div>
+
+
+                    <br>
+                    <br>
+                    <br>
+                    <br>
+                    <br>
+
+
+                </div>
+
+
 
 
-                    @endforeach
 
 
 
@@ -89,7 +75,6 @@
                     <br>
                     <br>
                     <br>
-                </div>
             </div>
         </section>
 
diff --git a/css/app.css b/css/app.css
index dcef37d..7a6625e 100644
--- a/css/app.css
+++ b/css/app.css
@@ -739,4 +739,10 @@ a:hover {
 .card-footer{
   background-color: #f8f8f8;
   border-top: none;
+}
+
+.accordion-button:not(.collapsed)
+{
+  color: #754545;
+  background-color: #f8f8f8;
 }
\ No newline at end of file