CODEWITHSUNDEEP
twitter-bootstrap
user3240903
user3240903

Reputation: 35

bootstrap multiple togglable tab-content's

Sorry if this is what seems a silly question, but from my code you should be able to see that in laymen terms that I am trying to make it so once you click the 'educational' tab both the tab-pane elements appear. I know its now appearing because it is finding the first one and stopping there, but every time i try and put my own script it doesn't work.

I couldn't manage to paste the code into the provided box as the formatting went crazy (indenting) but here goes..

<body data-spy="scroll" data-target="#myTab">
<div class="container" style="background:#404040;>
    <div class="row">
        <div class="col-md-12" style="background:#707070;">
            <div class="btn-group btn-group-justified">
                <ul class="nav" id="myTab">
                    <li><a href="#commercial" data-toggle="tab">Commercial</a></li>
                    <li><a href="#residential" data-toggle="tab">Residential</a></li>
                    <li><a href="#educational" data-toggle="tab">Educational</a></li>
                </ul>
            </div>
        <div class="col-md-9" style="background:#101010; height:1000px; margin-bottom:10px;">
            <div class="tab-content">
                <div class="tab-pane fade" id="educational">
                    this should be hidden
                </div>
            </div>
        </div>
            <div class="col-md-3">
                <div id="fixednav">
                    <div class="tab-content">
                        <div class="tab-pane fade active in" id="commercial">
                            <ul class="nav">
                                <li class="active" ><a href="#house">MAYTIME INN, BURFORD</a></li>
                                    <li><a href="#house1">CIRENCESTER BUSINESS PARK</a></li>
                                    <li><a href="#house2">SHOTTERY BROOK BUSINESS PARK</a></li>
                                    <li><a href="#house2">SPRINGFIELD BUSINESS PARK</a></li>
                                    <li><a href="#house2">RANELAGH TERRACE</a></li>
                                    <li><a href="#house2">TESCO EXPRESS MEASHAM</a></li>
                                    <li><a href="#house2">PRIMROSE HOSPICE</a></li>
                            </ul>
                        </div>
                            <div class="tab-pane fade" id="residential">
                                <ul class="nav">
                                    <li class="active" ><a href="#house">PENDEEN ROAD</a></li>
                                        <li><a href="#house2">LILLINGTON ROAD, LEAMINGTON SPA</a></li>
                                        <li><a href="#house2">BROADWAY COTTAGES, CHALGROVE</a></li>
                                        <li><a href="#house2">CLARENDON PLACE, LEAMINGTON SPA</a></li>
                                        <li><a href="#house2">MILL HOLLOW, DORRIDGE</a></li>
                                        <li><a href="#house2">THE CRICKETERS, DORRIDGE</a></li>
                                        <li><a href="#house2">HARVINGTON COURT</a></li>
                                </ul>
                            </div>
                                <div class="tab-pane fade" id="educational">
                                    <ul class="nav">
                                        <li class="active" ><a href="#house">NEWBOTTLE AND CHARLTON C of E PRIMARY SCHOOL</a></li>
                                        <li><a href="#house2">ILMINGTON C of E PRIMARY SCHOOL</a></li>
                                        <li><a href="#house2">ALDRIDGE SCHOOL</a></li>
                                    </ul>
                                </div>
                    </div>
                </div>
            </div>
        </div>
</div>

Upvotes: 0

Views: 547

Answers (1)

joshhunt
joshhunt

Reputation: 5335

You can only use an id once on a page, you are using id="educational" twice which is why it isn't working. Why don't you just group it into a big tab like this?

<div class="row">
    <div class="col-md-12" style="background:#707070;">
        <div class="btn-group btn-group-justified">
            <ul class="nav" id="myTab">
                <li><a href="#commercial" data-toggle="tab">Commercial</a></li>
                <li><a href="#residential" data-toggle="tab">Residential</a></li>
                <li><a href="#educational" data-toggle="tab">Educational</a></li>
            </ul>
        </div>
        <div class="tab-content">
            <div class="col-md-3 col-md-offset-9 tab-pane fade active in" id="commercial">
                <div id="fixednav">
                    <ul class="nav">
                        <li class="active"><a href="#house">MAYTIME INN, BURFORD</a></li>
                        <li><a href="#house1">CIRENCESTER BUSINESS PARK</a></li>
                        <li><a href="#house2">SHOTTERY BROOK BUSINESS PARK</a></li>
                        <li><a href="#house2">SPRINGFIELD BUSINESS PARK</a></li>
                        <li><a href="#house2">RANELAGH TERRACE</a></li>
                        <li><a href="#house2">TESCO EXPRESS MEASHAM</a></li>
                        <li><a href="#house2">PRIMROSE HOSPICE</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-md-3 col-md-offset-9 tab-pane fade" id="residential">
                <ul class="nav">
                    <li class="active"><a href="#house">PENDEEN ROAD</a></li>
                    <li><a href="#house2">LILLINGTON ROAD, LEAMINGTON SPA</a></li>
                    <li><a href="#house2">BROADWAY COTTAGES, CHALGROVE</a></li>
                    <li><a href="#house2">CLARENDON PLACE, LEAMINGTON SPA</a></li>
                    <li><a href="#house2">MILL HOLLOW, DORRIDGE</a></li>
                    <li><a href="#house2">THE CRICKETERS, DORRIDGE</a></li>
                    <li><a href="#house2">HARVINGTON COURT</a></li>
                </ul>
            </div>
            <div class="tab-pane fade" id="educational">
                <div class="col-md-9" style="background:#101010; height:1000px; margin-bottom:10px;">
                     this should be hidden
                </div>
                <div class="col-md-3">
                    <ul class="nav">
                        <li class="active"><a href="#house">NEWBOTTLE AND CHARLTON C of E PRIMARY SCHOOL</a></li>
                        <li><a href="#house2">ILMINGTON C of E PRIMARY SCHOOL</a></li>
                        <li><a href="#house2">ALDRIDGE SCHOOL</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
</div>

Click here for an example

Upvotes: 1

Related Questions