Develop Reference

How to show active Bootstrap Accordion in a Laravel foreach loop?

I'm trying to show active bootstrap accordion in a laravel foreach loop, but I'm facing an issue.
What I'd like to do is what you see on the top image. But when I refresh the browser, the accordion closes as you can see on the bottom image.
Here's my code :
<div class="course-dashboard-side-content">
#foreach ($formation->sections as $section)
#php
$increment++;
#endphp
<div class="accordion course-item-list-accordion" id="accordionCourseMenu">
<div class="card">
<div class="card-header" id="collapseMenuOne">
<h2 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse"
data-target="#collapseSection-{{ $section->id }}" aria-expanded="false"
aria-controls="collapseOne">
<span class="widget-title font-size-15 font-weight-semi-bold">Section
{{ $increment }}: {{ $section->name }}</span>
<div class="course-duration">
<span>{{ $section->courses->count() }} Vidéos </span>
<span>Durée Totale</span>
</div>
</button>
</h2>
</div>
<div id="collapseSection-{{ $section->id }}" class="collapse" aria-labelledby="collapseMenuOne" data-parent="#accordionCourseMenu">
<div class="card-body">
<div class="course-content-list">
<ul class="course-list">
#foreach ($section->courses as $course)
#php
$increment2++;
#endphp
<li class="course-item-link {{ $loop->first ? 'active' : '' }}">
<div class="course-item-content-wrap">
<div class="custom-checkbox">
<input type="checkbox" id="chb29">
<label for="chb29"></label>
</div>
<div class="course-item-content">
<h4
class="widget-title font-size-15 font-weight-medium">
{{ $increment2 }}.
<a href="{{ route('student.course.chapitre', [
$formation->slug,
'course' => $course->slug,
'id' => $section->id,
]) }}">
{{ $course->name }}
</a>
</h4>
<div class="courser-item-meta-wrap">
<p class="course-item-meta"><i
class="la la-play-circle"></i>Durée</p>
#if ($course->document)
<div class="msg-action-dot">
<div class="dropdown">
<a class="theme-btn theme-btn-light"
href="#" data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false">
<i class="fa fa-folder-open mr-1"></i>
Document<i
class="fa fa-angle-down ml-1"></i>
</a>
</div>
</div>
#else
#endif
</div>
</div>
</div>
</li>
#endforeach
</ul>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
Also, is there a way to make the li active?
I tried different ways, but I failed.

<ul class="faq-list">
#forelse ($faqs as $faq)
<li>
<div data-bs-toggle="collapse" class="collapsed question" href="#faq{{ $faq->id }}">{{ $faq->question }}<i class="bi bi-chevron-down icon-show"></i><i class="bi bi-chevron-up icon-close"></i></div>
<div id="faq{{ $faq->id }}" class="collapse" data-bs-parent=".faq-list">
<p>
{{ $faq->answer }}
</p>
</div>
</li>
#empty
<div>No Questions Found</div>
#endforelse
</ul>

How do you move a div into another using javascript?

I have two divs of the same size, and when I click a button on one of the divs, it will get larger. I want to move the smaller div into the bottom-right corner of the larger div, and when I click the button again the divs will return to their original size and position.
Before:
--- ---
| 1 | | 2 |
--- ---
After:
---------
| 2 |
| ---|
| | 1 |
---------
Here's my javascript for resizing so far:
function resizeSubscriber() {
var subscriberPanel = document.getElementById('dvOtherPerson');
var publisherPanel = document.getElementById('dvYou');
var classSetting = subscriberPanel.getAttribute('class');
if (classSetting == 'col-xl-4') {
subscriberPanel.setAttribute('class', 'col-xl-12');
}
else {
subscriberPanel.setAttribute('class', 'col-xl-4');
}
}
here is my asp code
<div id="dvOtherPerson" class="col-xl-4">
<div>
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Rachel Hawkins
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-volume-up text-success"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
<a onclick="resizeSubscriber();" href="#" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<img src="./img/temp/users/video_rachel.jpg" class="img-fluid" />
</div>
</div>
<%-- <div id="videos">
<div id="subscriber"></div>
</div>--%>
</div>
<div id="dvYou" class="col-xl-4">
<div class="m-portlet m-portlet--fit">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Me
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-microphone-slash text-danger"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<div id="publisher"></div>
</div>
</div>
</div>

Use appendChild, and it will move the source element to a target element, e.g.
target_element.appendChild(source_element)
As commented, to apply different CSS style, do like this and the source_element will automatically change when inside the target_element
source_element {...}
target_element source_element {...}

If you can use jQuery, you can use the method append():
$(<OUTER_SELECTOR>).append($(<INNER_SELECTOR>));

How to use button in ion list item and perfom action for the button and list separately

I am having an list item in which each list item has an button based on a condition. If I click the button it should show popup and if I click the list item it should go to next page but what happens is if I click the button it shows the popup as well as in background it goes to the next page can anyone tell me how to handle this.
Html:
<ion-list class="trans-item">
<div class="FramerList list" ng-repeat="bill in vm.bills | filter: vm.search">
<a class="item item-icon-left" ng-if="bill.bill_paid==='true'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-checkmark-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
</a>
<a class="item item-icon-left item-button-right" ng-if="bill.bill_paid==='false'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-close-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
<button class="button button-small billbook-button" ng-click="vm.billpaid(bill)">{{"farmerbillpaid_message" | translate}}</button>
</a>
</div>
</ion-list>

You can try something like this :
<ion-list class="trans-item">
<div class="FramerList list" ng-repeat="bill in vm.bills | filter: vm.search">
<a class="item item-icon-left" ng-if="bill.bill_paid==='true'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-checkmark-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
</a>
<a class="item item-icon-left item-button-right" ng-if="bill.bill_paid==='false'" ng-click="vm.gotoBillDetail(bill)">
<i class="icon ion-close-circled"></i>
{{"bno_message" | translate}} {{ bill.bill_no }}
</a>
<button class="button button-small billbook-button" ng-click="vm.billpaid(bill)">{{"farmerbillpaid_message" | translate}}</button>
</div>
</ion-list>

angular js array data is not showing properly

I want to show comments array data in html but it is not showing data properly. What should I do? Data is showing same like in comments array. What am I doing wrong? What should I do?
<ul class="media-list" ng-controller="dishDetailController as menuCtrl">
<li class="media" ng-repeat="dish in menuCtrl.dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail"
ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span>
</h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<p><strong>Customers Comment </strong>
sort by: <input type="text" ng-model="dish.comment">
</p>
<blockquote>
<p>{{dish.comments }}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</div>
var dishes=[
{
name:' Salad with Eggs',
image:'images/image-2.jpg',
label:'Delicous',
price:'10',
description:' Health salad with eggs and wonder taste with reasonable price !',
comments:[
{
rating:5,
comment:'',
author:'John Doe',
date:Date
}
],
https://i.stack.imgur.com/2e35Y.jpg

you should use ng-repeat to iterate through the array and show relevant data from the array elements:
<blockquote ng-repeat="comment in dishes.comments">
<p>{{comment.comment}}</p>
<p>{{comment.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
EDIT:
Here is a demo

Your ng-repeat should be like this,
<ul class="media-list" ng-controller="dishDetailController">
<li class="media" ng-repeat="dish in dishes">
<div class="media-left media-middle">
<a href="#">
<img class="media-object img-thumbnail" ng-src={{dish.image}} alt="Uthappizza">
</a>
</div>
<div class="media-body">
<h2 class="media-heading">{{dish.name}}
<span class="label label-danger">{{dish.label}}</span>
<span class="badge">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
<div class="col-xs-9 col-xs-offset-1">
<blockquote>
<p><strong>Customers Comment </strong> sort by:
<input type="text" ng-model="comment">
</p>
<blockquote ng-repeat="eachline in dish.comments | filter:comment">
<p>{{eachline.comment}}</p>
<p>{{eachline.author}}</p>
<footer> <cite title="Source Title "></cite></footer>
</blockquote>
</blockquote>
</div>
</li>
</ul>
DEMO

I guess you want something like this.
<blockquote>
<p> {{dish.comments.rating }}</p>
<p> {{dish.comments.comment }}</p>
<p> {{dish.comments.author }}</p>
<p> {{dish.comments.date | date: 'dd/MM/yyyy' }}</p>
</blockquote>

<div class="row row-content" ng-controller="DishDetailController as DishCtrl">
<div class=" col-xs-12 "> <div class="media ">
<div class="media-left media-middle ">
<a href="# ">
<img class="media-object img-thumbnail " ng-src={{dish.image}} alt="Uthappizza ">
</a>
</div>
<div class="media-body ">
<h2 class="media-heading ">{{dish.name}}
<span class="label label-danger ">{{dish.label}}</span>
<span class="badge ">{{dish.price | currency}}</span></h2>
<p>{{dish.description}}</p>
</div>
</div>
</div>
<div class="col-xs-9 col-xs-offset-1">
<ul class="list-inline">
<li>
<h2>customer comments </h2>
</li>
<li>Sort by: <input type="text" ng-model="query"></li>
</ul>
<ul class="list-unstyled">
<li ng-repeat="comment in dish.comments | orderBy:query">
<blockquote>
<p> {{comment.rating}} stars</p>
<p>{{comment.comment}}</p>
<footer>{{comment.author}} ,{{comment.date | date:'MMM,dd,yyyy'}}</footer>
</blockquote>
</li>
</ul>
</div>

Dynamic ng-repeat using ui param value

I would like to do something like ng-repeat="statement in {{ range }}Statements" where range is a ui param value that can be pos, neu and neg depending on the URL:
/#/sidemenu-statements/1/pos
/#/sidemenu-statements/1/neg
/#/sidemenu-statements/1/neu
It would allow me to consolidate the three lists below... is it possible to do this?
If not what would be a better approach?
statements.view.html
<div ng-controller="StatementsController">
<!-- List of positive statements -->
<div class="list card" ng-repeat="statement in posStatements | orderBy: '-timestamp'" ng-if="range==='pos'">
<div class="item item-icon-left">
<i class="icon {{ statement.accountIcon }}"></i>
<h2>{{ statement.accountTag }}</h2>
<span am-time-ago="{{ statement.timestamp }}"></span>
</div>
<div class="item item-body">
<span>{{ statement.statement }}</span>
<div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
</div>
<div class="button-bar">
<a class="button button-balanced"><i class="icon ion-happy"></i></a>
<a class="button button-dark">Skip</a>
<a class="button button-assertive"><i class="icon ion-sad"></i></a>
</div>
</div>
<!-- List of neutral statements -->
<div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neu'">
<div class="item item-icon-left">
<i class="icon {{ statement.accountIcon }}"></i>
<h2>{{ statement.accountTag }}</h2>
<span am-time-ago="{{ statement.timestamp }}"></span>
</div>
<div class="item item-body">
<span>{{ statement.statement }}</span>
<div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
</div>
<div class="button-bar">
<a class="button button-balanced"><i class="icon ion-happy"></i></a>
<a class="button button-dark">Skip</a>
<a class="button button-assertive"><i class="icon ion-sad"></i></a>
</div>
</div>
<!-- List of negative statements -->
<div class="list card" ng-repeat="statement in negStatements | orderBy: '-timestamp'" ng-if="range==='neg'">
<div class="item item-icon-left">
<i class="icon {{ statement.accountIcon }}"></i>
<h2>{{ statement.accountTag }}</h2>
<span am-time-ago="{{ statement.timestamp }}"></span>
</div>
<div class="item item-body">
<span>{{ statement.statement }}</span>
<div align="center"><p>We've assessed this post as <strong>{{ range }}</strong>. What do you think?</p></div>
</div>
<div class="button-bar">
<a class="button button-balanced"><i class="icon ion-happy"></i></a>
<a class="button button-dark">Skip</a>
<a class="button button-assertive"><i class="icon ion-sad"></i></a>
</div>
</div>
<div>

I would do the following:
ng-repeat="statement in getStatements(range)"
and add this function in the controller (you can use a switch/case structure if you're not a fan of the string concatenation):
$scope.getStatements = function(range) {
return $scope[range + "Statements"];
};