J. Scull J. Scull - 1 month ago 5
HTML Question

Bootstrap Collapse - no function?



I am trying to add a button to my simple webpage that will expand to display a list of hyperlinks when expanded. I decided to tackle this I will use bootstrap however I cannot get it to work and my colleague cannot find the issue either. The button is loaded along with the bootstrap CSS, JS and JQuery (3.1.1). Which is annoying as almost every fix I find when searching for solutions is a missing jquery.min.js file.


So, what is actually happening?

Nothing. That's the problem, all the items for the list are hidden in the button however when the button is clicked there is no action or change in the webpage.

So, onto the code and the issue itself.


My relevant HTML code (section of code at the bottom of my file):

</div>
<div class="containment">
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="collapseExample">Test Click Me</button>
<div class="collapse" id="collapseExample">
<ul>
<li>Yoyoyoyo</li>
<li>hihihihi</li>
<li>hellohello</li>
</ul>
</div>
</div>
</body>
</html>

{% block footer %}
<script language="text/javascript" src="{% static 'QMS/simple-expand.min.js' %}"></script>
<script type="text/javascript" src="{% static 'QMS/jquery-3.1.1.min.js' %}"></script>
<script language="JavaScript" type="text/javascript" src="{% static 'QMS/jscript.js' %}"></script>
<script language="JavaScript" type="text/javascript" src="{% static 'QMS/bootstrap.min.js' %}"></script>
<!-- <script language="JavaScript" type="text/javascript" src="{% static 'QMS/jquery.min.js' %}"></script> -->
{% endblock footer %}


Relevant CSS code:

.btn{
position: absolute;
top:150px;
left:200px;
}


Relevant Screens:

-Display on my site (Blue button):enter image description here


I'm hoping it's just something simple I've missed out but I've been searching and trying to no end! Cheers in advance everyone!

Answer

Your data-target attribute is missing a #.

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="collapseExample">Test Click Me</button>

should be

<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample">Test Click Me</button>
Comments