Can I use glyphicons as collapsible bullet points?

Is it possible to set clickable glyphicons for bullet points instead of buttons? Right now I've managed to put buttons, but I'm hiding the bullet points.

Code is here: http://www.codeply.com/go/WDCzrCNhYG

I'm trying to put glyphicons for bullets, so that when I click on them they collapse if they're bolded (meaning there's description in the sub-bullets) and that they're normal or faded when they're not collapsible.

Something like this: http://www.codeply.com/go/zAVFMMybdr but with Item3 and Item4 bullets to be bolded and clickable/collapsible.

Right now I'm trying to figure out if I can use buttons and hide the background and the outline so only the glyphicon is shown. But in that case I would also need to specify that Item1 and Item2 buttons are not clickable.

Any help is much appreciated. I'm new to this so I'm sorry if I didn't explain myself well enough:)

P.S. As instructed I'm adding the code here instead of providing an outside link.

.btn {
    padding: 0px 5px;
}

/* Icon when the collapsible content is shown */
  .btn:after {
    font-family: "Glyphicons Halflings";
    content: "\e113";
    float: left;
  }

  /* Icon when the collapsible content is 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>

Solution

It certainly is...you just have to move the data-toggle attribute to the li and then target that specifically.

li {
  padding-left: 1.5em;
  position: relative;
}
/* Icon when the collapsible content is shown */

li[data-toggle="collapse"]:after {
  position: absolute;
  left: 0;
  top: 0;
  font-family: "Glyphicons Halflings";
  content: "\e113";
  color:black;
}
/* Icon when the collapsible content is 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>