I created an accordion and div. The accordion is working. I want to put php files in div. When I clicked a list link I want to bring page content on the div. How should I track a way? İs there another way?. You can see https://jsfiddle.net/y8fuwtg6/1/
<div style="width:200px; float:left; margin:20px 20px;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
List1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="index1.php">
List1
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
List2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="index2.php">
List2
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
List3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="index3.php">
List3
</a>
</div>
</div>
</div>
</div>
<div id="test" style="width: 150px; min-height:200px; background-color: #cdcdcd; margin:20px 20px; height: auto; display:inline-block;">
</div>
I solved my problem. I just used a script. İt can solve with ajax. Maybe this document may help someone.
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" href="css/bootstrap.min.css" >
<link rel="stylesheet" href="css/bootstrap-theme.min.css" >
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
</head>
<body>
<div style="width:400px; float:left;">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
List1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<a href="homepage.php">
List1
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingTwo">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
List2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="panel-body">
<a href="computer.php">
List2
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
List3
</a>
</h4>
</div>
<div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<a href="electronic.php">
List3
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFour">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFour" aria-expanded="false" aria-controls="collapseFour">
List4
</a>
</h4>
</div>
<div id="collapseFour" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFour">
<div class="panel-body">
<a href="phone.php">
List4
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingFive">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseFive" aria-expanded="false" aria-controls="collapseFive">
List5
</a>
</h4>
</div>
<div id="collapseFive" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingFive">
<div class="panel-body">
<a href="books.php">
List5
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingSix">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSix" aria-expanded="false" aria-controls="collapseSix">
List6
</a>
</h4>
</div>
<div id="collapseSix" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSix">
<div class="panel-body">
<a href="services.php">
List6
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingSeven">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseSeven" aria-expanded="false" aria-controls="collapseSeven">
List7
</a>
</h4>
</div>
<div id="collapseSeven" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingSeven">
<div class="panel-body">
<a href="contact.php">
List7
</a>
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingEight">
<h4 class="panel-title">
<a class="collapsed" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseEight" aria-expanded="false" aria-controls="collapseEight">
List8
</a>
</h4>
</div>
<div id="collapseEight" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingEight">
<div class="panel-body">
<a href="about.php">
List8
</a>
</div>
</div>
</div>
</div>
</div>
<div id="test" style="width: 600px; background-color: #cdcdcd; margin-left: 20px; height: auto; display:inline-block;">
</div>
<script>
$(".panel-body a").click(function(){
var x=$(this).attr("href");
$("#test").load(x);
return false;
});
</script>
</body>
</html>
Related
I am having trouble restricting menu options for user roles in Laravel 7. The menu for 'admin' and 'profesor' are similar but I decided to make two different views for each one and make an #include in the main view.
User model
public function roles()
{
return $this->belongsToMany(Role::class,'assigned_roles');
}
public function isAdmin()
{
return $this->hasRoles(['admin']);
}
public function hasRoles(array $roles)
{
foreach ($roles as $role) {
foreach ($this->roles as $userRole) {
if ($userRole->name === $role) {
return true;
}
}
}
return false;
}
public function userRole()
{
return $this->role->nombre_rol;
}
My view
<hr class="hr-unam">
#if (auth()->user()->hasRoles(['admin']))
<div class="sideover">
<!-- *********************** SERVESCOL *********************** -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h5 class=" text-center panel-title">
<a class="txt-unam txt-side font-weight-bold text-uppercase" style="text-decoration:none" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
SERVESCOL
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-group" id="sub-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="subHeadingOne">
<a role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubOne" aria-expanded="true" aria-controls="collapseSubOne">
#include('main.sidebarServescol')
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="hr-unam">
#else
#if(auth()->user()->hasRoles(['profesor']))
<!-- *********************** SERVESCOL *********************** -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h5 class=" text-center panel-title">
<a class="txt-unam txt-side font-weight-bold text-uppercase" style="text-decoration:none" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
SERVESCOL
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-group" id="sub-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="subHeadingOne">
<a role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubOne" aria-expanded="true" aria-controls="collapseSubOne">
#include('main.sidebarProfesor')
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<hr class="hr-unam">
#endif
#endif
But both options disappear and the view breaks down. I have also tried it within the views of each menu directly, but in both, the role of 'admin' as in the role of 'profesor', remove the option that covers the #if.
Your hasRoles function could be a bit simpler
public function hasRoles(array $roles)
{
return $this->roles->contains(function ($role, $key) use ($roles) {
return in_array($role->name, $roles);
});
}
// PHP 7.4 and above
public function hasRoles(array $roles)
{
return $this->roles->contains(fn($role, $key) => in_array($role->name, $roles));
}
You could use the #includeWhen directive.
<hr class="hr-unam">
<div class="sideover">
<!-- *********************** SERVESCOL *********************** -->
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h5 class=" text-center panel-title">
<a class="txt-unam txt-side font-weight-bold text-uppercase" style="text-decoration:none" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
SERVESCOL
</a>
</h5>
</div>
<div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<div class="panel-group" id="sub-accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="subHeadingOne">
<a role="button" data-toggle="collapse" data-parent="#sub-accordion" href="#collapseSubOne" aria-expanded="true" aria-controls="collapseSubOne">
#includeWhen(auth()->user()->hasRoles(['admin']), 'main.sidebarServescol')
#includeWhen(auth()->user()->hasRoles(['profesor']), 'main.sidebarProfesor')
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
I have an accordeon in my web, but when i click them, it does nothing, it just moves down, even though I have jquery and bootstrap activated, could it be that it is conflicting with another jquery? since my site is in wordpress
$.fn.jquery ( JQuery )
'1.12.4'
$.fn.tooltip.Constructor.VERSION ( Bootstrap )
'4.5.3'
I check by console the versions that I have
and the example code in my web:
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingThree">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#balances" aria-expanded="true" aria-controls="balances">
<h1 data-uw-styling-context="true">BALANCES</h1>
</a>
</h4>
</div>
<div id="balances" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
<div class="panel-body">
<!-- TEXT HERE -->
<div class="panel-group" id="sub-accordion_3" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="subHeadingThree">
<h3 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#sub-accordion_3" href="#balances_2011" aria-expanded="true" aria-controls="balances_2011" data-uw-styling-context="true">
2011 - 2015
</a>
</h3>
</div>
<div id="balances_2011" class="panel-collapse collapse" role="tabpanel" aria-labelledby="HeadingSubThree">
<div class="panel-body">
<!-- TEXT HERE -->
<table class="table table-bordered table-striped">
<tbody>
<tr>
<td>
2011<img src="https://media.readspeaker.com/images/buttons/listen_icons/icon_16px.gif" alt="Abrir este documento usando ReadSpeaker docReader" title="Abrir este documento usando ReadSpeaker docReader" class="rspkr_dr_img" style="border: 0px; display: inline; margin: 0px; position: absolute;">
</td>...
Codepen : https://codepen.io/Amaroak/pen/bGrQpPj
Thanks!
I make a one faq script in PHP I want to change the icon when I open the panel and close the panel.I have tried these code but not get success.So what is the error in my code?
<div class="col-md-9 col-lg-9 col-sm-12 ">
<?php $v1 = ''; foreach($var as $data){ ?>
<div class="faqHeader" id="<?php echo str_replace(' ','',$data['name']);?>"> <?php echo $data['name'];?> </div>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php foreach($data['data'] as $dat){ ?>
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" href="#col<?php
echo $v1;?>" aria-expanded="true" aria-controls="col<?php
echo $v1;?>">
<span class="glyphicon glyphicon-minus pull-right"></span>
<?php echo $dat['questions'];?>
</a>
</h4>
</div>
<div id="col<?php echo $v1;?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
<?php echo $dat['answer'];?>
</div>
</div>
</div>
<?php $v1=$v1+1; } ?>
</div>
<?php } ?>
</div>
<script>
$('.collapse').on('shown.bs.collapse', function(){
$(this).parent().find(".glyphicon-plus").removeClass("glyphicon-plus").addClass("glyphicon-minus");
}).on('hidden.bs.collapse', function(){
$(this).parent().find(".glyphicon-minus").removeClass("glyphicon-minus").addClass("glyphicon-plus");
});
</script>
Please help me?
Try this
css solution
.panel-heading [data-toggle="collapse"].collapsed:after{
content: "+";
float: right;
}
.panel-heading [data-toggle="collapse"]:after {
content: "-";
float: right;
}
.panel-heading [data-toggle="collapse"].collapsed:after{
content: "+";
float: right;
}
.panel-heading [data-toggle="collapse"]:after {
content: "-";
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#aaa">
aaa
</a>
</h4>
</div>
<div id="aaa" class="panel-collapse collapse in">
<div class="panel-body">
aaa<br>
aaa
</div>
</div>
</div> <!-- .panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb">
bbb
</a>
</h4>
</div>
<div id="bbb" class="panel-collapse collapse">
<div class="panel-body">
bbb<br>
bbb
</div>
</div>
</div>
</div>
</div>
Js solution
$("#accordion, #bs-collapse").on("show.bs.collapse",function(a){
$(a.target).prev('.panel-heading').addClass('active');
});
$("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){
$(a.target).prev('.panel-heading').removeClass('active');
});
$("#accordion, #bs-collapse").on("show.bs.collapse",function(a){
$(a.target).prev('.panel-heading').addClass('active');
});
$("#accordion, #bs-collapse").on('hide.bs.collapse',function(a){
$(a.target).prev('.panel-heading').removeClass('active');
});
.panel-heading a:after {
content: "+";
float: right;
}
.panel-heading.active a:after {
content: "-";
float: right;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading active">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#aaa">
aaa
</a>
</h4>
</div>
<div id="aaa" class="panel-collapse collapse in">
<div class="panel-body">
aaa<br>
aaa
</div>
</div>
</div> <!-- .panel -->
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#bbb">
bbb
</a>
</h4>
</div>
<div id="bbb" class="panel-collapse collapse">
<div class="panel-body">
bbb<br>
bbb
</div>
</div>
</div>
</div>
</div>
I'm trying to create an accordion/panel with expand/collapse. All the data from model are printed correctly, the only issue I get is that collapse/expand work for the first item. How can I implement it for each item?
my code:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
$html_ret = '
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="false" aria-controls=".collapse">
<b>%s</b> (%s)
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
%s
</div>
</div>
</div>';
foreach($arr_table_content as $row)
{
echo sprintf($html_ret, $row['TrainingName'],$row['TrType'],$row['Tr_description']);
}
?>
</div>
Thank you for any suggestions
because the rest panel have the same ID as the first panel #collapseOne, try to concatinate an increment number with the id, ex:
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<?php
$html_ret = '
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne%u" aria-expanded="false" aria-controls=".collapse">
<b>%s</b> (%s)
</a>
</h4>
</div>
<div id="collapseOne%u" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
<div class="panel-body">
%s
</div>
</div>
</div>';
$counter = 1;
foreach($arr_table_content as $row)
{
echo sprintf($html_ret,$counter,$row['TrainingName'],$row['TrType'],$counter,$row['Tr_description']);
$counter++;
}
?>
</div>
I believe your problem comes from the fact that all your panel-headings have the same id="headingOne". Try setting a dynamic ID in your foreach loop (same thing for your panel-collapse)
I am trying to do an accordion collapse/fold however i am not set on it being an according, standard collapse/fold is fine if the accordion effect is troublesome however i want it to show initially with all fields collapsed.
Bear in mind i am doing a loop to create each one, that might be irrelevant as i can add in a different id,class on the first loop no problem but just worth mentioning it.
So i have this:
<div class="row">
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Title1
</a>
</h5>
</div>
<div id="collapse1" class="panel-collapse collapse in">
<div class="panel-body">
Content1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Title2
</a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse in">
<div class="panel-body">
Content2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Title3
</a>
</h5>
</div>
<div id="collapse3" class="panel-collapse collapse in">
<div class="panel-body">
Content3
</div>
</div>
</div>
</div>
</div>
Then i have the following script
<script>
$(function() {
var $active = true;
$('.panel-title > a').click(function(e) {
e.preventDefault();
});
$('.collapse-init').on('click', function() {
if(!$active) {
$active = true;
$('.panel-title > a').attr('data-toggle', 'collapse');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$(this).html('Click to disable accordion behavior');
} else {
$active = false;
$('.panel-collapse.in').removeClass('in');
$('.panel-collapse').collapse({'toggle': true, 'parent': '#accordion'});
$('.panel-title > a').removeAttr('data-toggle');
$(this).html('Click to enable accordion behavior');
}
});
});
</script>
I have messed around with it in the chrome editor to try and edit the class from collapse to collapse in and vice versa on them all but nothing seems to force it to collapse them all. One always remains open.
Just remove the in class from your <div id="collapse1" class="panel-collapse collapse in">
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
Title1
</a>
</h5>
</div>
<div id="collapse1" class="panel-collapse collapse">
<div class="panel-body">
Content1
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse2">
Title2
</a>
</h5>
</div>
<div id="collapse2" class="panel-collapse collapse">
<div class="panel-body">
Content2
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h5 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse3">
Title3
</a>
</h5>
</div>
<div id="collapse3" class="panel-collapse collapse">
<div class="panel-body">
Content3
</div>
</div>
</div>
</div>
</div>