Twitter Bootstrap Question posted in

Twitter bootstrap – bootstrap collapse is not working?

I was trying to code using twitter bootstrap
and my code is not working, please take a look at the collapse that I code: 

        <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>test</title>

<link type="text/css" rel="stylesheet" href="css/bootstrap.css"n />
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>


</head>

<body>

<div class="navbar navbar-default navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>

<a href="#" class="navbar-brand">page</a>
</div>
<div align="center" class="navbar-collapse collapse" >
<ul class="nav navbar-nav">
<li><a href="#" >home</a></li>
<li><a href="#">About</a></li>
</ul>
</div>
</div>
</div>

<!------------------------------------------ Accordian ------------------------------->
<br/><br/><br/>

<div class="container">
<div class="row">
<div class="col-md-12">

<h2>Accordian</h2>

<div class="panel-group" id="accordian">

<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">

<a data-toggle="collapse" data-parent="#accordian" href="#section1">

Q1
</a>

</h4>

</div>

<div class="panel-collapse collapse in" id="#section1">

<div class="panel-body">
this will contain text 

</div>
</div>

</div>
</div>
</div>

</div>

</div>


</body>
</html>

I have read that I need to like my code to Jquery which I did but it’s still isn’t working can someone tell me what is wrong?

Tags:

2

Answers


  1. 0

    Here’s a working fiddle for you, using your same code: https://jsfiddle.net/yellen/x4zfwxsh/

    This is your updated code for the accordian:

    <div class="col-md-12">
    <h2>Accordian</h2>
    <div class="panel-group" id="accordian" role="tablist" aria-multiselectable="true">
        <div class="panel panel-default">
            <div class="panel-heading" role="tab" id="heading1">
              <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordian" href="#section1"  aria-expanded="true" aria-controls="section1"> Q1</a>
              </h4>
            </div>
            <!-- id="#section1" needs to be updated to id="section1"-->
            <div class="panel-collapse collapse in" id="section1" role="tabpanel" aria-labelledby="heading1">
                <div class="panel-body">this will contain text</div>
            </div>
        </div>
    </div>
</div>

    You should also need to understand that # within a hyperlink specifies an html element id to it be scrolled.
    If href="#section1" then your element id should be <div id="section1">

    For more information on ARIA: https://developer.mozilla.org/en-US/docs/Web/Accessibility/An_overview_of_accessible_web_applications_and_widgets

    Login or Signup to reply.
  2. 0

    Looks like you’ve got a typo with your div tag id declaration – it has # sign. In your case:

    Instead of <div class="panel-collapse collapse in" id="#section1"> should be <div class="panel-collapse collapse in" id="section1">

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search