Areya
/
alpakas-theme
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

added faq accordion

master
Benjamin Völkl 2021-09-16 17:49:52 +02:00
parent efd09669f9
commit f050c1f202
2 changed files with 35 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

71
content/lists/faq.blade.php
View File

@ -29,60 +29,46 @@
<section> <section>
<div class="row"> <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="accordion-item">
<div class="col-12 col-md-4" style="padding-bottom: 1rem;"> <h2 class="accordion-header" id="heading{{$nach->id}}">
<div class="card" style="background-color: #f8f8f8;"> <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse{{$nach->id}}" aria-expanded="true" aria-controls="collapse{{$nach->id}}">
@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}} {{$nach->title}}
</a> </button>
</h5> </h2>
</div> <div id="collapse{{$nach->id}}" class="accordion-collapse collapse" aria-labelledby="heading{{$nach->id}}" data-bs-parent="#accordionExample">
<div class="col-12"> <div class="accordion-body">
<small class="card-subtitle mb-2 text-muted" title="{{date('d.m.Y', strtotime($nach->created_at))}}"> {{ $nach->created_at->diffForHumans() }}</small> <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 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>
</div> </div>
</div> </div>
</div>
</div>


@endforeach @endforeach






</div>


<br>
<br>
<br>
<br>
<br>


</div>







{!! $nachrichten->render() !!} {!! $nachrichten->render() !!}


<br> <br>
@ -90,7 +76,6 @@
<br> <br>
<br> <br>
</div> </div>
</div>
</section> </section>





6
css/app.css
View File

@ -740,3 +740,9 @@ a:hover {
background-color: #f8f8f8; background-color: #f8f8f8;
border-top: none; border-top: none;
} }

.accordion-button:not(.collapsed)
{
color: #754545;
background-color: #f8f8f8;
}