Ayesha
Ayesha

Reputation: 125

remove borders of Accordion in bootstrap

Here is pic of nav-list class:

screenshot

I want to make a dropdown with accordion. To do this, I want to remove the borders.

I have tried the following, but its not working:

.accordion, .accordion * {
    border:none;
}

Here's my html code:

<div class="span3">
    <ul class="nav nav-list">

        <li><a href="#">At least 4</a></li>
        <li><a href="#">At least 3</a></li>
        <li class="nav-header">Search by Hourly rate</li>
        <li><a href="#">dfa</a></li>
    </ul>

    <div class="accordion" id="ac2">
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#ac2" href="#cone">
                    item #1
                </a>
            </div>
            <div id="cone" class="accordion-body collapse">
                <div class="accordion-inner">
                    adfadf<br />dafa
                </div>
            </div>
        </div>
        <div class="accordion-group">
            <div class="accordion-heading">
                <a class="accordion-toggle" data-toggle="collapse" data-parent="#ac2" href="#ctwo">
                    item #2
                </a>
            </div>
            <div id="ctwo" class="accordion-body collapse">
                <div class="accordion-inner">
                    what is ad
                </div>
            </div>
        </div>
    </div>
</div>

Any suggestions to make dropdowns like accordion?

Upvotes: 1

Views: 3279

Answers (2)

Ayesha
Ayesha

Reputation: 125

It was not working because i was using Bootstrap v 2.3.2 It worked properly when i upgraded it to Bootstrap v 3.2.0

Upvotes: 2

DavidG
DavidG

Reputation: 118947

Theo border is on the accordion-group class, that is Bootstrap 2 (and likely 3) kindly adding that for you. Fix it like this:

.accordion-group {
  border: none;
}

Upvotes: 2

Related Questions