I've got a bit of a problem here, and i'm not sure how to fix it. It's probably something really small and stupid, but i'm looking over it...
I've got this accordion in bootstrap, and normally the open elements collapse when you select a new one. This is not happening in my version.
Code Below:
<template>
<div class='monsters'>
<div class="loading" v-if="loading">
<div class="loading">Loading…</div>
</div>
<div v-if="error" class="error">
{{ error }}
</div>
<ul v-if="monsters">
<div class="panel-group" id="accordion">
<div class="panel panel-default" v-for="monster in monsters">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" :href="'#monster'+monster.id">{{ monster.name }}</a>
</h4>
</div>
<div :id="'monster'+monster.id" class="panel-collapse collapse in">
<monster-lg v-bind:monster="monster"></monster-lg>
</div>
</div>
</div>
</ul>
</div>
</template>
Any ideas on why how etc?
Related
I need to separately collapse accordions created inside a vue js v-for. I know that something like Id which can be used to separately identify the accordion will solve this. But don't know where to give this dynamic id?
Here is my HTML
<div role="tablist">
<div v-for="item in productFormData" v-bind:key="item.id">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle.accordion-productdetails variant="info">Product Details</b-button>
</b-card-header>
<b-collapse
id="accordion-productdetails"
visible
accordion="productdetails-accordion"
role="tabpanel"
>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<span style="font-size:13px;font-weight:bold;">Name</span>
<div>
<span id="spnCustomerName">{{item.name}}</span>
</div>
</div>
</div>
</b-collapse>
</b-card>
</div>
To add a dynamic id to it you need to add index to the for loop so every time you use the index to identify the specific accordion like this, or you can use your item.id but i don't know the content of it:
CODEPEN :
https://codepen.io/emkeythekeyem/pen/WNbqeyM?editors=1010
<div role="tablist">
<div v-for="(item,index) in productFormData" v-bind:key="item.id">
<b-card no-body class="mb-1">
<b-card-header header-tag="header" class="p-1" role="tab">
<b-button block v-b-toggle="'accordion-productdetails'+index" variant="info">Product Details</b-button>
</b-card-header>
<b-collapse
:id="'accordion-productdetails'+index"
visible
:accordion="'productdetails-accordion'+index"
role="tabpanel"
>
<div class="container-fluid">
<div class="row">
<div class="col-sm-4">
<span style="font-size:13px;font-weight:bold;">Name</span>
<div>
<span id="spnCustomerName">{{item.name}}</span>
</div>
</div>
</div>
</b-collapse>
</b-card>
</div>
see https://bootstrap-vue.js.org/docs/components/collapse/#usage:
<!-- Using value -->
<b-button v-b-toggle="'collapse-2'" class="m-1">Toggle Collapse</b-button>
EDIT :
Reviewing my code i noticed that the accordion param in <b-collapse needs to change also, just edit it to :
:accordion="'productdetails-accordion'+index"
I also edited the code of my first answer
Using Bootstrap 5 with CDN, first import the <link> and JS bundle in the public/index.html.
The code is from the Bootstrap 5 accordion. Notice that the flush-headingOne has been changed to 'flush-heading'+index.
Notice the accordionCollection could be imported from the js file with data(), or passed down from the parent props. The property title, description could be different defined in the array data.
HTML (template)
<div class="accordion accordion-flush" id="accordionFlushExample">
<div class="accoridon-item" v-for="(accordionItem,index) in accordionCollection" :key="index">
<h2 class="accordion-header" :id="'flush-heading'+index">
<button
class="accordion-button collapsed"
type="button"
data-bs-toggle="collapse"
:data-bs-target="'#flush-collapse'+index"
aria-expanded="false"
:aria-controls="'flush-collapse-'+index">
{{ accordionItem.title }}
</button>
</h2>
<div
:id="'flush-collapse'+index"
class="accordion-collapse collapse"
:aria-labelledby="'flush-heading'+index"
data-bs-parent="#accordionFlushExample">
<div class="accordion-body"> {{ accordionItem.description }} </div>
</div>
</div>
</div>
I am trying to implement an Accordion button on my webpage using the HTML code given below. I am currently implementing this on a very basic scale without using any javascript code with this accordion snippet.
The button just clicks and does nothing and the basic collapsing doesn't take place nor does the accordion functionality is implemented.
Kindly help me in implementing this!
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" type="button"
data toggle="collapse" data-target="#collapseButtonExample" aria-
expanded="true" aria-controls="collapseExample">Question
</button>
</div>
<div class="collapse" id="collapseButtonExample" >
<div class="card card-body">
<p></p>
</div>
</div>
</div>
Something like this will work if there is single element
<div class="panel panel-default">
<div class="panel-heading">
<button class="btn btn-primary" type="button" #btn (click)="btn.toggle = !btn.toggle"
>Question
</button>
</div>
<div [ngClass]="{collapse:!btn.toggle}" >
<div class="card card-body">
<p>1# something</p>
</div>
</div>
</div>
if you have many element this trick will work
<div class="panel panel-default" *ngFor="let i of [1,2,3,4]">
<div class="panel-heading">
<button class="btn btn-primary" type="button" #btn (click)="btn.toggle = !btn.toggle"
>Question
</button>
</div>
<div [ngClass]="{collapse:!btn.toggle}" >
<div class="card card-body">
<p>{{i}}# something</p>
</div>
</div>
</div>
stackblitz demo 🚀🚀
I need to collapse other component from a button. So I have a directive name collapse and I want to set target collapseme to the diretive.
<div class="panel-heading">
<h4 class="panel-title">
<a [collapse]="isColapse" [collapseTarget]="collapseme" (click)="isColapse= !isColapse">
</a>
</h4>
</div>
<div id="collapseme">
<div class="panel-body">
collapse content
</div>
</div>
But I cant find solution for it. Do you have any solution?
Add a template variable #collapseme
<div class="panel-heading">
<h4 class="panel-title">
<a [collapse]="isColapse" [collapseTarget]="collapseme" (click)="isColapse= !isColapse">
</a>
</h4>
</div>
<div id="collapseme" #collapseme> <!-- modified -->
<div class="panel-body">
collapse content
</div>
</div>
It seems you have used bootstrap. You can do it via bootstrap
collapse
Here is the code to play with:
Bootply
$('.collapse').on('shown.bs.collapse', function() {
$("span").addClass('glyphicon-chevron-up').removeClass('glyphicon-chevron-down');
});
$('.collapse').on('hidden.bs.collapse', function() {
$("span").addClass('glyphicon-chevron-down').removeClass('glyphicon-chevron-up');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="panel-group" id="accordionMessagesSetup">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a class="accordion-toggle" data-toggle="collapse" data-parent="#accordionMessagesSetup" href="#collapseMessagesSetup">
<span class="glyphicon glyphicon-chevron-up"></span>
Message Setup
</a>
</h4>
</div>
<div id="collapseMessagesSetup" class="panel-collapse collapse in">
<div class="container">
<p> my content goes here... </p>
</div>
</div>
</div>
</div>
</div>
How can I remove the borders around my panel, except for the top one? I want the top border but not the ones on left, right or bottom.
Sorry if it seems too simple; I'm just new to whole web dev stack.
Make use of the border-width properties.
Check the CSS in this code: Bootply
i have the following html code for the bootstrap collapse
<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Month Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;">
<div class="panel-body" style="padding:0px;">
#Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
this has a dev express control. when the page loads the navigator (this is a calendar) displays expanded and the context underneath it moves. So to prevent this i need to make the calendar overflow over the content. How do i make this calendar control overflow over the other?
here is an image to show whats happening
You should make the panel-default position: relative so that it's descendants are bound to it and then make the panel-collapse position: absolute to prevent it from affecting the rest of the flow.
<div class="panel-group" id="accordion" style="margin-left:890px;width:444px;padding:0px;border:0px solid black;position:relative">
<div class="panel panel-default">
<div class="panel-heading" style="padding:0px;">
<button type="button" class="btn btn-info" data-toggle="collapse" data-target="#demo" style="border:0px;width:442px;margin:0px;" data-parent="#accordion">
<span style="float:left;">Month Calendar</span>
<span class="glyphicon glyphicon-menu-down" style="float:right"></span>
</button>
</div>
<div id="demo" class="panel-collapse collapse in" style="border:0px solid black;padding:0px;position:absolute;top:100%;">
<div class="panel-body" style="padding:0px;">
#Html.DevExpress().DateNavigator(Html.GetSchedulerSettings()).Bind(Model.Appointments, Model.Resources).GetHtml()
</div>
</div>
</div>
</div>
Note: You are using alot of inline styles, it is best to keep as much of styling as possible in css.