I will be creating left vertical (sidebar) navigation menu by referring "Example" in https://getbootstrap.com/docs/5.0/components/accordion/.
Below is the link where sub menu items are present as Subitem 1, Subitem 2, Subitem 3 under item 3 and item 4.
https://www.codeply.com/go/K1gXPZwV59/bootstrap-vertical-sidebar-_-accordion-menu-with-submenus
Could you please help how to create such sub menu items(Subitem 1, Subitem 2, Subitem 3) in the "Example"?
Do you want nested accordions? If so, just nest them. Snippet below uses the "Example" you referred to in your question.
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> Accordion Item #1 </button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
<div class="accordion" id="accordionExampleTwo">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneOne" aria-expanded="true" aria-controls="collapseOneOne"> Accordion Item #1-1 </button>
</h2>
<div id="collapseOneOne" class="accordion-collapse collapse" aria-labelledby="headingOneOne" data-bs-parent="#accordionExampleTwo">
<div class="accordion-body">
<strong>This is the first NESTED item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOneTwo">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOneTwo" aria-expanded="true" aria-controls="collapseOneTwo"> Accordion Item #1-2 </button>
</h2>
<div id="collapseOneTwo" class="accordion-collapse collapse" aria-labelledby="headingOneTwo" data-bs-parent="#accordionExampleTwo">
<div class="accordion-body">
<strong>This is the second NESTED item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> Accordion Item #2 </button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow. </div>
</div>
</div>
</div>
If you want a list group menu inside the accordion:
.accordion-body {
/*padding: 0 !important;*/
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
<!--- Bootstrap Icons -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.10.2/font/bootstrap-icons.css">
<div class="accordion" id="accordionExample">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Accordion Item #1
</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
<div class="accordion-body">
<div class="list-group">
The current link item <i class="bi bi-caret-down-fill"></i>
<div class="collapse" id="listCollapseOne">
A nested first link item
A nested second link item
A nested third link item
</div>
A second link item
A third link item
A fourth link item
</div>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Accordion Item #2
</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
<div class="accordion-body">
<strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing
and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
</div>
</div>
</div>
</div>
Related
I'm working on making an FAQ page and have a bootstrap collapse with the categories of questions as the collapse titles and the questions as the body.
I'm using the same collapse for both the index and question display pages and I am passing a local variable local: { display: boolean } to differentiate.
I loop through the categories collection to make each table row
<% #categories.each_with_index do |category, index| %>
I have conditionals in the class and aria-expanded of the trigger element:
class='<%= "collapsed" if !display || category != #question.category %>'
aria-expanded='<%= category == #question.category %>'
And in the class of the target
class='collapse <%= "show" if display && category == #question.category %>'
The page loads with the correct row open but it doesn't close when triggered.
Everything is described in the Bootstrap documentation
To achieve what you need, you have to:
For buttons/headers:
set data-toggle="collapse"
if the content of the target has to be hidden, then set aria-expanded="false"
if the content of the target has to be displayed, then set aria-expanded="true"
For the targets:
set class="collapse" if the target has to be hidden
set class="collapse show" if the target has to be displayed
Here is an example
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<p>
<a class="btn btn-primary" data-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1">Toggle first element</a>
<button class="btn btn-primary collapsed" type="button" data-toggle="collapse" data-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2">Toggle second element</button>
</p>
<div class="row">
<div class="col">
<div class="collapse show multi-collapse" id="multiCollapseExample1">
<div class="card card-body">
First element content (displayed by the default)
</div>
</div>
</div>
<div class="col">
<div class="collapse multi-collapse" id="multiCollapseExample2">
<div class="card card-body">
Second element content
</div>
</div>
</div>
</div>
I have been working with MVC for a few months and its going well, but I can't figure out how to create a Sidebar menu all the way to the utmost left of the screen.
This is a standard MVC 5 web application.
What I think the problem is, is that in _Layout View, the
#RenderBody()
falls within the div tag:
<div class="container body-content">
So all code in any of my created Views is contained in that container.
Is this even the reason?
My View:
<h2>TestSideBar</h2>
<div class="container" id="sidebar" style="margin-left: 0px">
<div id="wrapper" class="wrapper">
<!-- Sidebar -->
<div class="nav navbar-left">
<div class="sidebar-wrapper">
<div class="logo">
<a href="#" class="simple-text">
Placeholder
</a>
</div>
<ul class="nav">
<li>
<a href="#Url.Action("Item1", "Controller")">
<span class="glyphicon glyphicon-off "> Item 1</span>
</a>
<a href="#Url.Action("Item2", "Controller")">
<span class="glyphicon glyphicon-star "> Item 2</span>
</a>
</li>
</ul>
</div>
</div><!-- end navbar-left -->
</div><!-- end sidebar container -->
<div class="main-panel">
Main Content Stuff Here
</div><!-- end main-panel -->
</div><!-- end wrapper-->
I have attached 2 images, how it looks now and how I want it to look
I have tried using the #section RenderLeft as well.
I just can't get it to look the way I want.
Thanks.
Well I have found two ways to do this so far. There could be better ones out there.
Firstly I was correct in my assumption that the container div in _Layout View was causing the problem.
Option 1
In the _Layout View, before the container div and RenderBody, use #RenderSection code
#RenderSection("LeftMenu", required: false)
<div class="container body-content">
#RenderBody()
Then in the View you want the menu, enclose the menu code in:
#section LeftMenu{
<!-- Content Here -->
}
The "LeftMenu" is just a name, any name can be used here.
This causes the code in the #section to be "run" before the RenderBody.
This works, but has a drawback in that since I possible want to use the menu in more than one View, I have to add the #section LeftMenu {} code in each View I want it because you cannot use #section {} in a partial view.
Option 2:
In _Layout View, remove the container div that encloses #RenderBody
In each View enclose the code in a container div. Create the menu in a partial view and render it (#Html.Partial) in each view you need it, before the content code.
Neill
You can use Html.RenderPartial
Create a view, e.g: _LeftMenu.csthml and put it in the "Views/Shared" folder.
Put the left menu html in that view, example(this can of course be done with Divs and a Model if you prefer)
<ul class="list-group">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="Home" asp-action="Index">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-controller="NextController" asp-action="Index">another menu link</a>
</li>
</ul>
Then divide the content area in your Layout page into two, one for your left menu and the second for the render body area that will contain the child pages:
<body>
<header>
</header
<div class="row col-md-12 FullContent">
<div class="col-md-2 CustomLeftnavbar">
#{Html.RenderPartial("~/Views/Shared/_LeftMenu.cshtml");}
</div>
<div class="container col-md-10">
<main role="main" class="CustomBody">
#RenderBody()
</main>
</div>
</div>
</body>
This way you will not need to go against the DRY principle as it will be shared with any and all other pages that uses the same layout page
I have a button element that triggers a modal. This piece of code is reusable, and needs to be present on many different views.
<button class="btn btn-default" type="button" data-toggle="modal" data-target="#modalAcctToggle">
Toggle Accounts
</button>
<div id="modalAcctToggle" tabindex="-1" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Available Accounts</h4>
</div>
<div class="modal-body">
[contents not relevant]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
Pretty simple and straightforward. Put all that in a partial view, and render it as necessary with #Html.Partial("_accountToggler")
However, Bootstrap documentation encourages placing modals outside of the meat of the page:
http://getbootstrap.com/javascript/#modals
Modal markup placement Always try to place a modal's HTML code in a top-level position in your document to avoid other components
affecting the modal's appearance and/or functionality.
My immediate thought was to use Razor sections for this.
<button data-target="#modalAcctToggle" etc... />
#section modals {
<div id="modalAcctToggle" etc... />
}
Wrap all modals in a section, then use #RenderSection("modals") in the Layout, and the modals would be emitted at a safe place in the DOM.
Unfortunately, Razor sections do not work in Partial Views! This is apparently by design, but it is meant to limit the use of scripts in partials.
I have found many other questions from people trying to work around the lack of sections in partials, but their exclusive focus is on dealing with scripts. The solutions found there essentially consist of rolling your own equivalent to Razor sections, or are specialized for dealing with scripts (like bundling). It seems ludicrous to have to put in the effort of reinventing Razor sections to hack around an intentional limitation when my usage is not the target of said limitation.
How can I best handle getting the modal HTML into a different spot?
UPDATE: As discussed in the comments on the answer, this question was based in two fundamental misunderstandings.
1) Bootstrap modals can be located amongst the rest of the HTML without issue. You just have to be careful to keep it from inheriting any CSS it shouldn't.
2) Sections are not cumulative. So even if I could use sections in partial views, it would not work the way I want it to. Multiple partials using the same section would overwrite each other. This is likely the real reason why, by design, sections do not work in partials.
TL;DR; The key takeaway here is that sections are defined in the layout view; they're roughly equivalent to the ContentPlaceholder controls you'd find in a WebForms project. They are then used in the "full" views that normally correspond to your various actions. If you haven't read it yet, I'd say Scott Gu's intro to sections has a good explanation.
If we assume that you have this partial view, which I'll call _Modal.cshtml:
<button class="btn btn-default" type="button" data-toggle="modal" data-target="#modalAcctToggle">
Toggle Accounts
</button>
<div id="modalAcctToggle" tabindex="-1" class="modal fade">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span>×</span></button>
<h4 class="modal-title">Available Accounts</h4>
</div>
<div class="modal-body">
[contents not relevant]
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And you have a layout similar to
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>#ViewBag.Title - My ASP.NET Application</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
</head>
<body>
#RenderSection("modals", required: false)
<div class="container body-content">
#RenderBody()
<hr />
<footer>
<p>© #DateTime.Now.Year - My ASP.NET Application</p>
</footer>
</div>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
The you can do something like this in, say, Index.cshtml
#section modals
{
#Html.Partial("_Modal")
}
and it will emit the proper markup in the correct place. You would then need to place any interaction logic either directly in the parent view, or use the scripts section (in the parent view).
I need to change the panel color of the parent that is open. I was told I could use something called "panel-class" but my attempts to use if have been unsuccessful. I copied the sample code directly from the "example" that was provided but still the panel color does not change. I am trying to use this in an MVC _Layout.cshtml page. Could that be the reason?
Here is my HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<title>#ViewBag.Title</title>
#Styles.Render("~/Content/css")
#Scripts.Render("~/bundles/modernizr")
#Scripts.Render("~/bundles/jquery")
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<script src="~/Scripts/angular.js"></script>
<script src="~/Scripts/angular-sanitize.js"></script>
<script src="~/Scripts/ui-bootstrap-custom-tpls-0.13.3.js"></script>
<script src="~/Scripts/app/app.js"></script>
<script src="~/Scripts/app/AccordionCtrl.js"></script>
<script src="~/Scripts/app/generalsearchService.js"></script>
</head>
<body>
<header>
<div class="content-wrapper">
<div class="float-left">
<p class="site-title">
</div>
<div class="float-right">
<nav>
</nav>
</div>
</div>
</header>
<div>
</div>
<div ng-app="myModule" ng-controller="AccordionCtrl">
<script type="text/ng-template" id="group-template.html">
<div class="panel {{panelClass || 'panel-default'}}">
<div class="panel-heading">
<h4 class="panel-title" style="color:#fa39c3">
<a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
<span ng-class="{'text-muted': isDisabled}">{{heading}}</span>
</a>
</h4>
</div>
<div class="panel-collapse collapse" collapse="!isOpen">
<div class="panel-body" style="text-align: right" ng-transclude></div>
</div>
</div>
</script>
<p>
<button type="button" class="btn btn-default btn-sm" ng-click="status.open = !status.open">Toggle last panel</button>
<button type="button" class="btn btn-default btn-sm" ng-click="status.isFirstDisabled = ! status.isFirstDisabled">Enable / Disable first panel</button>
</p>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="oneAtATime">
Open only one at a time
</label>
</div>
<accordion close-others="oneAtATime">
<accordion-group heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled">
This content is straight in the template.
</accordion-group>
<accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</accordion-group>
<accordion-group heading="Dynamic Body Content">
<p>The body of the accordion group grows to fit the contents</p>
<button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
<div ng-repeat="item in items">{{item}}</div>
</accordion-group>
<accordion-group heading="Custom template" template-url="group-template.html">
Hello
</accordion-group>
<accordion-group heading="Delete account" panel-class="panel-danger">
<p>Please, to delete your account, click the button below</p>
<button class="btn btn-danger">Delete</button>
</accordion-group>
<accordion-group is-open="status.open">
<accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</accordion-heading>
This is just some content to illustrate fancy headings.
</accordion-group>
</accordion>
</div>
<div id="myBody" style="margin-top:50px; margin-left:320px; width:80%; position:absolute">
#RenderBody()
</div>
</div>
#Scripts.Render("~/bundles/jquery")
#RenderSection("scripts", required: false)
</body>
</html>
Here is what it looks like when I run it:
As you can see, the text color changes on the one example, but the panel color does not change on the "Delete" tab. Thanks in advance for any assistance. Have a great day all!
I have the answer for you, check out my github page:
https://github.com/brendancopley/customDirectives/tree/master/custom-accordion-ui-bootstrap
Here's the example DEMO https://brendancopley.github.io/customDirectives/custom-accordion-ui-bootstrap/
I made a Custom Directive of UI-Bootstrap Accordion.
To answer your question, it's really simple:
.panel.panel-open {
color: orangered
}
Or you can add an id to your uib-accordion-group and then include it in the css to have different color when opened for each heading you want.
<div uib-accordion-group id="anything" class="panel-white" is-open='menuStatus[2].isOpen'>
<uib-accordion-heading>
<i style="padding-right:10px;" class="pull-left glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen, 'glyphicon-chevron-up': !menuStatus[2].isOpen}"></i>Example Heading
</uib-accordion-heading>
<p>blah blah blah blah</p>
</div>
And then in your CSS add this
#anything.panel.panel-open {
color: #8f42f4; }
Per the examples here, you can see that the Delete account accordion uses the panel-class attribute to change/override the default class and the I can have markup, too! accordion shows how to use ng-class to set a class based on whether or not the accordion is open.
Either open the Plunker from this example or fork it and change the panel-class attribute from panel-danger to panel-success to see the change. Additionally, you can change the glyphicon-chevron-down and glyphicon-chevron-right classes to your own custom classes and they will get applied on open or close.
In the future, please read the documentation and examples thoroughly before asking for help. Per SO's own guidelines, show that you've attempted to solve the issue before asking for help.
When creating a jQuery Mobile Accordion, how do I get a section of the accordion to open when a button is clicked?
When the user clicks the search button, I want to load the results into a list in the second panel, collapse the first and expand the second.
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
Search
</div>
<div id="resultsContainer" data-role="collapsible">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
Live Example:
http://jsfiddle.net/h2pPz/19/
HTML:
<div data-role="page" id="home" class="type-home">
<div data-role="content">
<div data-role="collapsible-set">
<div id="filterContainer" data-role="collapsible" data-collapsed="false">
<h3>Filters</h3>
<p>controls to pick options</p>
<!-- Either button syntax works -->
<!-- Search -->
<input type="button" value="Search" id="search"/>
</div>
<div id="resultsContainer" data-role="collapsible" data-collapsed="true">
<h3>Results</h3>
<p>list of results</p>
</div>
<div>
</div>
</div>
JS:
$('#search').click(function() {
$('#resultsContainer').trigger('expand');
});