CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
J. Scull
J. Scull

Reputation: 319

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!

Upvotes: 0

Views: 206

Answers (2)

bassxzero
bassxzero

Reputation: 5041

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>

Upvotes: 1

Mohammad Usman
Mohammad Usman

Reputation: 39322

You are missing # symbol in data-target attribute.

<button class="btn btn-primary" type="button"
        data-toggle="collapse"
        data-target="#collapseExample">Test Click Me</button>
                     ^^----// Add this id selector and your problem will be fixed


<link href="https://maxcdn.bootstrapcdn.com/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://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<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>

Upvotes: 0

Related Questions