html - Can I use glyphicons as collapsible bullet points? -
is possible set clickable glyphicons bullet points instead of buttons? right i've managed put buttons, i'm hiding bullet points.
code here: http://www.codeply.com/go/wdczrcnhyg
i'm trying put glyphicons bullets, when click on them collapse if they're bolded (meaning there's description in sub-bullets) , they're normal or faded when they're not collapsible.
something this: http://www.codeply.com/go/zavfmmybdr item3 , item4 bullets bolded , clickable/collapsible.
right i'm trying figure out if can use buttons , hide background , outline glyphicon shown. in case need specify item1 , item2 buttons not clickable.
any appreciated. i'm new i'm sorry if didn't explain myself enough:)
p.s. instructed i'm adding code here instead of providing outside link.
.btn { padding: 0px 5px; } /* icon when collapsible content shown */ .btn:after { font-family: "glyphicons halflings"; content: "\e113"; float: left; } /* icon when collapsible content hidden */ .btn.collapsed:after { content: "\e080"; }<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <body> <p class="font_heading"><small>attractions</small></p> <ul id="placepul" style="list-style: none;"> <li style="margin-left:28px">item1</li> <li style="margin-left:28px">item2</li> <li><button type="button" class="btn btn-info btn-xs collapsed" data-toggle="collapse" data-target="#demo1"></button> item3</li> <ul id="demo1" class="collapse"> <li>description 1</li> <li>description 2</li> <li>description 3</li> </ul> <li><button type="button" class="btn btn-info btn-xs collapsed" data-toggle="collapse" data-target="#demo2"></button> item4</li> <ul id="demo2" class="collapse"> <li>description 4</li> <li>description 5</li> <li>description 6</li> </ul> </ul> </body>
it is...you have move data-toggle attribute li , target specifically.
li { padding-left: 1.5em; position: relative; } /* icon when collapsible content shown */ li[data-toggle="collapse"]:after { position: absolute; left: 0; top: 0; font-family: "glyphicons halflings"; content: "\e113"; color:black; } /* icon when collapsible content hidden */ li[data-toggle="collapse"].collapsed:after { content: "\e080"; color:grey; }<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <h4>toggling </h4> <ul id="placepul" style="list-style: none;"> <li>item1</li> <li>item2</li> <li class="collapsed" data-toggle="collapse" data-target="#demo1">item3</li> <ul id="demo1" class="collapse"> <li>description 1</li> <li>description 2</li> <li>description 3</li> </ul> <li class="collapsed" data-toggle="collapse" data-target="#demo2">item4</li> <ul id="demo2" class="collapse"> <li>description 4</li> <li>description 5</li> <li>description 6</li> </ul> </ul>
Comments
Post a Comment