Viewing file:  faq.blade.php (3.95 KB) -rw-r--r--
Select action/file-type:
 (+) |  (+) |  (+) | Code (+) | Session (+) |  (+) | SDB (+) |  (+) |  (+) |  (+) |  (+) |  (+) |
@extends('multirestaurant::layouts.master')
@section('title')
{{ json_decode(get_settings('site_setting'))->name }} - {{ trans('multirestaurant::layout.multi_restaurants') }}
@endsection
@section('css')
<style>
.faq-section h1 {
font-size: 1.875rem;
line-height: 2.25rem;
margin: 0;
font-weight: 700;
}
.faq-section p {
font-weight: 600;
color: #64748b;
font-size: .875rem;
line-height: 1.25rem;
margin: 0;
}
.faq-section-content-item {
border: 1px dashed #64748b;
background-color: #f8fafc;
margin-top: .25rem;
margin-bottom: .25rem;
border-radius: 5px;
}
.faq-section-content-link {
position: relative;
padding: 12px 16px;
color: rgba(0, 0, 0, 0.88);
cursor: pointer;
transition: all 0.3s, visibility 0s;
}
.faq-section-content-link-header {
display: flex;
justify-content: space-between;
align-items: center;
}
.faq-section-content-link-header span {
font-size: 16px;
}
.faq-section-content-link-header i {
padding-left: 20px;
}
.faq-section-content-link-body{
background-color: transparent;
border: 0;
color: rgba(0, 0, 0, 0.88);
display: none;
}
.faq-section-content-link-body-box{
padding-top: 20px;
display: flex;
align-items: center;
}
.faq-section-content-item.active .faq-section-content-link-header i{
transform: rotate(90deg);
padding-buttom: 20px;
}
.faq-section-content-item.active .faq-section-content-link-body{
display: block;
}
</style>
@endsection
@section('content')
<main class="main">
<div class="mt-5 text-center faq-section">
<h1>{{ trans('multirestaurant::layout.questions_look_here') }}</h1>
<p class="mt-2">{{ trans('multirestaurant::layout.questions_look_here_des') }}</p>
<div class="mt-5 faq-section-content">
<div class="row">
<div class="col-lg-12">
<div class="row justify-content-center">
<div class="col-lg-8">
@foreach ($faqs as $key => $faq)
<div class="faq-section-content-item {{ $key == 0 ? 'active' : '' }}">
<div class="faq-section-content-link">
<div class="faq-section-content-link-header">
<span><b>{{$faq->title}}</b></span><i
class="fa fa-angle-right"></i>
</div>
<div class="faq-section-content-link-body">
<div class="faq-section-content-link-body-box">
{!!$faq->description!!}
</div>
</div>
</div>
</div>
@endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</main>
@endsection
@section('js')
<script>
$(document).on('click', '.faq-section-content-item', function(e) {
e.preventDefault();
if ($(this).hasClass('active')) {
$(this).removeClass('active');
} else {
$('.faq-section-content-item').removeClass('active');
$(this).addClass('active');
}
});
</script>
@endsection
|