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

View File

@ -29,60 +29,46 @@
<section>
<div class="row">

<div class="col-lg-12">

<div class="col-12">


<div class="accordion" id="accordionExample">
@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}}'});">
<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}}
</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>
</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>
</div>


@endforeach



</div>


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


</div>







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

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



View File

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

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