Adding arrows to the right using Bootstrap Accordion
Question
I wanted to see if it was possible to add arrows to the right of the Bootstrap Accordion headings.
I want the arrows to change from down to up on accordion collapse, is this complicated?
I want just the headings to have the arrows and for them to change on collapse, but I'm having the most trouble trying to figure this out.
Here is the code:
#AccordionHeadings { font-weight: bolder; color: slategrey; font-size: medium; } .small:hover { background-color: #F8E498!important; } .list-group-item h5 { margin-left: 10px; } #AccordionText { margin-bottom: 0px!important; color: gray; margin-left: 10px; } #AccordIcon { padding-right: 10px; height: 25px; width: 25px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <!DOCTYPE html> <html> <head> </head> <body> <div class="row"> <div class="col-12 col-md-10 col-md-8"> <h4>Choose the right app for the job!</h4> <hr style="margin-top: 10px;" /> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <a href="#" class="list-group-item" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"> <img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" /> <span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a> <div id="s0" class="sublinks collapse"> <!-- sublinks collapse --> <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"> <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" /> <div class=""> <h5>OneDrive</h5> <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet. </p> </div> </a> <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"> <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" /> <div> <h5>SharePoint</h5> <p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p> </div> </a> <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"> <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" /> <div> <h5>Teams</h5> <p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy. </p> </div> </a> </div> </div> </div> </div> </div> </body> </html>
Update
I have now gotten it to somewhat work thanks to the help from the awesome contributors here at Stack Overflow but I've come across a small problem.
Here is my problem that I'm currently experiencing.
On page load: ( Why are the arrows not pointing down on pageload? )
On first Accordion click: ( Now the icon is correct )
On second Accordion click: ( Perfect now )
Code:
.panel-title:after { font-family: FontAwesome; content: "\\f106"; float: right; color: grey; } .panel-title.collapsed:after { content: "\\f107"; }
<a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"> <img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" /> <span id="AccordionHeadings">File Storage and Sharing</span></a> <div id="s0" class="sublinks collapse"> <!-- sublinks collapse --> <a class="list-group-item small" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"> <div class="col-md-1"> <img style="height: 32px; width: 45px;" src="/TrainingResourceCenter/O365Training/PublishingImages/Homepage/OneDriveAccordion.png" /> </div> <div class="col-md-11"> <h5>OneDrive</h5> <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.</p> </div> </a>
3 answers
solution1
0 2018-06-25 13:39:04
Try this:
.panel-title {
position: relative;
}
.panel-title::after {
content: "\f107";
color: #333;
top: -2px;
right: 0px;
position: absolute;
font-family: "FontAwesome"
}
.panel-title[aria-expanded="true"]::after {
content: "\f106";
}
This is what it looks like in the snippet: PLEASE NOTE this is using font-awesome (for the arrow), so you will need the <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> in your <head> tags
#AccordionHeadings { font-weight: bolder; color: slategrey; font-size: medium; } .small:hover { background-color: #F8E498!important; } .list-group-item h5 { margin-left: 10px; } #AccordionText { margin-bottom: 0px!important; color: gray; margin-left: 10px; } #AccordIcon { padding-right: 10px; height: 25px; width: 25px; } .panel-title { position: relative; } .panel-title::after { content: "\\f107"; color: #333; top: -2px; right: 10px; position: absolute; font-family: "FontAwesome" } .panel-title[aria-expanded="true"]::after { content: "\\f106"; }
<html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//code.jquery.com/jquery-migrate-1.2.1.min.js"></script> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> </head> <body> <div class="row"> <div class="col-12 col-md-10 col-md-8"> <h4>Choose the right app for the job!</h4> <hr style="margin-top: 10px;" /> <div class="panel-group" id="accordion"> <div class="panel panel-default"> <a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"> <img id="AccordIcon" src="https://image.flaticon.com/icons/svg/148/148946.svg" /> <span id="AccordionHeadings">File Storage and Sharing</span><span class="glyphicon glyphicon-menu-down pull-right"></span></a> <div id="s0" class="sublinks collapse"> <!-- sublinks collapse --> <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/OneDrive.aspx"> <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/e0a3j2l.png" /> <div class=""> <h5>OneDrive</h5> <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet. </p> </div> </a> <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/SharePointOnline.aspx"> <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/uii8cJt.png" /> <div> <h5>SharePoint</h5> <p id="AccordionText">Share and manage content, knowledge, and applications to empower teamwork and quickly find information within your organization.</p> </div> </a> <a class="list-group-item small d-flex align-items-center" href="/TrainingResourceCenter/O365Training/Pages/Teams.aspx"> <img class="img-fluid" style="height: 32px; width: 45px;" src="https://i.imgur.com/fV0AGNi.png" /> <div> <h5>Teams</h5> <p id="AccordionText">Microsoft Teams is a chat-based workspace offered in Office 365. Teams makes collaborating with your team easy. </p> </div> </a> </div> </div> </div> </div> </div> </body> </html>
solution2
0 ACCPTED
将属性“collapsed”添加到所有单独的Accordion面板标题类中，它完美地运行。
<a href="#" class="list-group-item panel-title collapsed" data-toggle="collapse" data-target="#s6" data-parent="#accordion" style="background-color: #e5edf4;">
solution3
0 2018-06-25 15:26:39
Like the Bootstrap 3 solution I linked to as a possible duplicate; this can be solved entirely through the use of [aria-expanded=true] as a CSS selector. The only difference in Bootstrap 4 is the actual HTML structure of the accordion, the CSS for applying the arrows remains the same:
.panel-title:after { font-family: FontAwesome; content: "\\f107"; float: right; color: grey; } .panel-title[aria-expanded="true"]:after { content: "\\f106"; }
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous"> <link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" type="text/css" rel="stylesheet"> <script src="//code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script> <a href="#" class="list-group-item panel-title" data-toggle="collapse" data-target="#s0" data-parent="#accordion" style="background-color: #e5edf4;"> <span id="AccordionHeadings">File Storage and Sharing</span> </a> <div id="s0" class="sublinks collapse"> <a class="list-group-item small" href="#null"> <div class="col-md-1"> [ image ] </div> <div class="col-md-11"> <h5>OneDrive</h5> <p id="AccordionText">Store your files in one place, share them with others, and get them from any device connected to the Internet.</p> </div> </a> </div>
Note: If you want to use Font Awesome 5.x you may need to adjust the CSS to reference the exact font / font weight as the latest version breaks down its icons across multiple factors.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap accordion with arrows
Add up/down arrows to the bootstrap accordion with <accordion>
Add Up and down arrows to bootstrap accordion with pure JS
Bootstrap - Adding sliding menu with scroll Arrows on navbar
Change text every 3 sec or go to the next text using left / right arrows - bootstrap 3
Accordion Up Down Arrows
Accordion menu with rotating arrows
custom jquery accordion arrows
Adding 'active' class to open Bootstrap accordion item
Using a loop to create an accordion - Bootstrap
Related Tags