This task seems trickier than I expected. I am trying to create a Bootstrap dropdown list where the caret initially points to the right and then rotates downward when expanded. Rotating the caret is not the problem, but starting with it facing right is challenging. Do I need to hide the caret and replace it completely?
CSS for rotation:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(90deg);
}
/*for animation*/
.dropdown-toggle:after {
transition: 0.7s;
}
HTML:
<div class="dropdown">
<span class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
<span>
Dropdown Example
</span>
</span>
<ul class="dropdown-menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JavaScript</a></li>
</ul>
</div>
Update
To @mahan who thinks 'I must be doing something wrong". Here is the code for my test page where the caret does point right initially, but fails to rotate and expand the menu:
@{
Layout = null;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width" />
<title>TestPage</title>
<link href="~/Content/bootstrap.min.css" rel="stylesheet" />
</head>
<body>
<style>
.dropdown-toggle::after {
border-top: .3em solid transparent !important;
border-right: .3em solid transparent !important;
border-bottom: .3em solid transparent !important;
border-left: .3em solid !important;
vertical-align: middle !important;
transition: 0.7s;
}
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(90deg);
/*
You may transform origin of the caret.
*/
transform-origin: 0.15em 0.32em;
}
</style>
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
</body>
</html>
<script src="~/Scripts/jquery-3.4.1.slim.js"></script>
<script src="~/Scripts/popper.min.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>