I'm trying to make a small accordion page that similar to this however I can't get it so that other panels close when one is opened.
<div class="panel-group" id="accordion">
#foreach($questions as $_question)
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse-{{ $_question['sort']}}">{{ $_question['question'] }}</a>
</h4>
</div>
<div id="collapse-{{ $_question['sort']}}" class="panel-collapse collapse in">
<div class="panel-body">
<p>{!!$_question['answer'] !!}</p>
</div>
</div>
</div>
#endforeach
</div>
You're missing decare id to your panel-heading, and the aria-labelledby= in your panel-body.
Try this code:
<div class="panel-group" id="accordion">
#foreach($questions as $_question)
<div class="panel panel-default">
<div class="panel-heading" id="heading-{{ $_question['sort'] }}">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" data-target="#collapse-{{ $_question['sort']}}" aria-expanded="true" aria-controls="collapse-{{ $_question['sort']}}">
{{ $_question['question'] }}
</a>
</h4>
</div>
<div id="collapse-{{ $_question['sort']}}" class="panel-collapse collapse in" aria-labelledby="heading-{{ $_question['sort'] }}" data-parent="#accordion">
<div class="panel-body">
<p>{!!$_question['answer'] !!}</p>
</div>
</div>
</div>
#endforeach
</div>
Related
I have database results (reviews) which reviews can also be reported by the logged user. Before I make these reviews load through AJAX call the bs stepper worked perfectly (it is used for steps while reporting a review). Now when the database results (reviews) are loaded through AJAX call the bs stepper is giving me the following error on page load.
error
Here is how I define bs steppers for each review
#extends('Profile.master')
#section('content')
<div class="container-fluid mt-5">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-md-9 fw-bold fs-3 mb-4">
<span class="me-2"><i class="fas fa-tv"></i></span>
<span>branch {{ $branch->title }}</span>
</div>
</div>
<div class="row">
#foreach($branch->users as $user)
<div class="col-lg-4 mb-3 px-3">
<div class="card">
<div class="card-body">
<div class="row g-0 py-3">
<div class="col-3">
<img src="{{ asset('storage/'.$user->image) }}" class="img-fluid" width="100" height="100" alt="{{ $user->full_name }}">
</div>
<div class="col-8 pe-3">
<div class="row pb-3">
<div class="col">
<span class="h5">{{ $user->full_name }}</span>
<span class="small">{{ jdate($user->created_at)->ago() }}</span>
</div>
</div>
</div>
<div class="col-1 mt-2 text-end">
<a href="{{ url('http://localhost:8000/chatify/'.$user->id) }}">
<i class="fas fa-arrow-left fa-lg text-dark"></i>
</a>
</div>
</div>
<div class="row g-0 pb-3">
<div class="col border-top pt-3">
<p>company address: {{ $user->company_address }}</p>
<p>state: {{ $user->state->name }}</p>
<p>city: {{ $user->city->name }}</p>
<p>mobile: {{ $user->mobile }}</p>
</div>
</div>
<div class="row g-0 pb-3">
<div class="col border-top pt-3">
get resume
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
<div class="modal fade" id="openResumes{{ $user->id }}" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" aria-labelledby="openResumesTitle{{ $user->id }}" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="openResumesTitle{{ $user->id }}">resume <span class="h5">{{ $user->full_name }}</span></h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<div class="row">
#foreach($user->resumes as $resume)
<div class="col-lg-3 mb-3">
<img src="{{ asset('storage/'.$resume->image) }}" alt="{{ $user->full_name }}" class="img-fluid">
</div>
#endforeach
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">close</button>
</div>
</div>
</div>
</div>
#endsection
Note: This code does not just execute the first ID. Executes the rest.
I want to open a model for edit item. I have added wire:click on a div but that only works for the first item of foreach.
Livewire Method
public function selectMealPlan($mealId)
{
$this->dispatchBrowserEvent('openEditMealModal');
}
View file
#foreach ($meal_plans as $meal)
<div class="meals-plan-item">
<div class="meals-plan-item-type">
<div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
<div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
</div>
<div class="meals-plan-item-names">
<div class="meals-plan-item-label">MEAL NAMES:</div>
<div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
</div>
<div class="meals-plan-item-actions">
<div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
<i class="fas fa-pencil"></i>
</div>
<div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
<i class="fas fa-trash"></i>
</div>
</div>
</div>
#endforeach
<script>
window.addEventListener('openEditMealModal', function() {
alert('hello');
})
</script>
The component should have only one root element, a div for example:
<div class="meals-plan-item">
#foreach ($meal_plans as $meal)
<div class="meals-plan-item-type">
<div class="meals-plan-item-label" wire:click="test">MEAL TYPE:</div>
<div class="meals-plan-item-value">{{ $meal->meal_type }}</div>
</div>
<div class="meals-plan-item-names">
<div class="meals-plan-item-label">MEAL NAMES:</div>
<div class="meals-plan-item-value">{{ $meal->getMealItems() }}</div>
</div>
<div class="meals-plan-item-actions">
<div class="action-button edit" wire:click="selectMealPlan({{ $meal->id }})">
<i class="fas fa-pencil"></i>
</div>
<div class="action-button delete" data-toggle="modal" data-target="#deletePlan{{ $meal->id }}">
<i class="fas fa-trash"></i>
</div>
</div>
#endforeach
</div>
<div class="container mt-4 mb-4">
<div class="row">
<div class="col-lg-12">
<div id="blogCarousel" class="carousel slide" data-ride="carousel">
<div class="carousel-inner" role="listbox">
#foreach($reviews as $items)
<div class="carousel-item #if($loop->first) active #endif">
<div class="row">
#foreach($reviews as $review)
<div class="col-lg-4 ">
<a>
<div class="home1-img mt-3">
<?php
for($i=1;$i<6;$i++){
$check = '';
if($review->number_of_stars >= $i){
$check = 'checked';
}
echo '<span class="fa fa-star '.$check.'"></span>';
}
?>
<div class="home1-text mt-1" style="margin-bottom:30px;">
<p>{!! Illuminate\Support\Str::limit($review->customer_review,100) !!}</p>
<h5 class="text-color font-weight-bold">{{ $review->customer_name }}</h5>
</div>
</div>
</a>
</div>
#endforeach
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
I am getting all the records in all sides but I want 3 records in 1st slide then 3 records in 2nd slide and so on. I have tried many times but I am not able to fix it.
i have problem with for each loop that must get value from table and get sum and count from other tables depends on selected row in loop
here is my code :
$flights = Basic::all();
foreach ($flights as $flight) {
if($flight->cur_allowed_seats > '0'){
$basics_id = Basic::find($flight->id);
$inf_count = Ticket::where([['sector',$flight->sector],['pass_type','3'],['flight_date',$flight->flight_date]])->get()->count();
$child_count = Ticket::where([['sector',$flight->sector],['pass_type','2'],['flight_date',$flight->flight_date]])->get()->count();
$total_sale = DB::table('tickets')
->where([['sector', $flight->sector],['flight_date',$flight->flight_date]])
->sum('sale');
$free_seats_per1= DB::table('basics')->where('id', $flight->id)->first()->cur_total_seats;
$free_seats_per2= DB::table('basics')->where('id', $flight->id)->first()->total_seats;
$free_seats_per=$free_seats_per1/$free_seats_per2*100;
return view('home', array('flights' => $flights,'basics_id' => $basics_id,'inf_count' => $inf_count,
'child_count' => $child_count,'total_sale' => $total_sale,'free_seats_per' => $free_seats_per,
));
}
and here is blade code :
<div class="content-body">
#foreach($flights as $flight)
<h1 class="content-header-title mb-0">{{ $flight->sector }} <span style="color: red">{{ $flight->flight_date }}</span></h1>
<!-- eCommerce statistic -->
<div class="row">
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info" >{{ $flight->cur_total_seats }}</h3>
<h6 style="font-size:12px;font-weight: bold">المقاعد الشاغرة بحائل</h6>
</div>
<div>
<i class="icon-flag info font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
{{-- {{ format_number((($basics_has->cur_total_seats/$basics_has->total_seats) * 100), 2) }}%--}}
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: {{ $free_seats_per }}%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="info" >{{ $child_count }}</h3>
<h6 style="font-size:12px;font-weight: bold">عدد الأطفال المحجوز بحائل</h6>
</div>
<div>
<i class="icon-user-following info font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-info" role="progressbar" style="width: {{ $flight->percent }}%"
aria-valuenow="80" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="success">{{$inf_count}}</h3>
<h6 style="font-size:12px;font-weight: bold">عدد الرضع المحجوز بحائل</h6>
</div>
<div>
<i class="la la-user success font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-success" role="progressbar" style="width: 80%"
aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-3 col-lg-6 col-12">
<div class="card pull-up">
<div class="card-content">
<div class="card-body">
<div class="media d-flex">
<div class="media-body text-left">
<h3 class="danger">{{$total_sale}}</h3>
<h6 style="font-size:12px;font-weight: bold">إجمالي مبيعات حائل</h6>
</div>
<div>
<i class="la la-dollar danger font-large-2 float-right"></i>
</div>
</div>
<div class="progress progress-sm mt-1 mb-0 box-shadow-2">
<div class="progress-bar bg-gradient-x-danger" role="progressbar" style="width: 85%"
aria-valuenow="85" aria-valuemin="0" aria-valuemax="100"></div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
my problem is that any value from any table except 'Basic' it return only one value not loop
can any one help me with this issue please ?
Can someone help with a dynamically loaded collapse panel with a nested dynamically loaded collapse panel? The issue I'm having is the image toggles for the outer and inner panels. The collapse part is working fine, the image toggle is what I'm having problems with. Here is something similar to what I have. Please forgive any syntax errors, I had to make up an example that is similar to mine.
<div class="container">
#foreach(AccountModel aModel in Model.AccountModels)
{
<div class="panel panel-default">
<div class="panel-heading" data-target="##aModel.Id" data-toggle="collapse" role="button">
<h4 class="panel-title">
<a>
<span class="glyphicon glyphicon-plus"></span>
#aModel.Description
</a>
</h4>
</div>
<div class="panel-collapse collapse" id="#aModel.Id">
<div class="panel-body">
#foreach(TransactionModel tModel in aModel.Transactions)
{
//nested collapse panel
<div class="panel panel-default">
<div class="panel-heading" data-target="##tModel.Id" data-toggle="collapse" role="button">
<h4 class="panel-title">
<a>
<span class="glyphicon glyphicon-plus"></span>
#tModel.Description
</a>
</h4>
</div>
</div>
<div class=panel-collapse collapse" id="#tModel.Id">
<div class="panel-body">
<p>Some details</p>
<p>More details</p>
<div>
<div>
}
</div>
</div>
</div>
}
</div>
<script>
$('.collapse').on('show.bs.collapse', function() {
$(this).parent().find(".glyphicon-plus:first").removeClass("glyphicon-plus").addClass("glyphicon-minus");
stopPropagation();
}).on('hide.bs.collapse', function() {
$(this).parent().find(".glyphicon-minus:first").removeClass("glyphicon-minus").addClass("glyphicon-plus");
stopPropagation();
});
</script>