raulbaros raulbaros - 4 months ago 6
HTML Question

Integrate two buttons dropdown toggle open

I am trying to integrate two buttons into one. So when you click the little V icon button the dropdown menu opens. But I would like that to happen also when you click the button with the title. Basically the two buttons (V-icon and title) should be one. Is that possible?



.btn_clear {
float: right;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 29px;
text-align: center;
font-size:10px;
background-color:blue;
color:#FFF;
}

.btn_apply {
float: left;
display: inline-block;
box-sizing: border-box;
width: 50%;
padding: 10px 17px;
text-align: center;
font-size:10px;
background-color:red;
color:#FFF;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
<button class="btn btn-primary" type="button">Car brand</button> <button class="btn btn-primary dropdown-toggle"
data-toggle="dropdown" type="button"><span class=
"caret"></span></button>
<div class="dropdown-menu car-brand">
<div class="typeahead-box">
<input class="car brand" placeholder=
"Car brand" type="text">
</div>
<div style="position: relative;">
<div class=" scrollable-menu" style="margin-bottom: 70px;">
<ul>
<li>mercedes</li>
<li>audi</li>
<li>volvo</li>
<li>renault</li>
</ul>

<div class="div_form">
<span class="btn_apply">Apply</span> <span class=
"btn_clear">Clear</span>
</div>
</div>
</div>
</div>




Answer

Try This

<button class="btn btn-primary" data-toggle="dropdown" type="button">Car brand</button>

Instead of

<button class="btn btn-primary" type="button">Car brand</button>

.btn_clear {
    float: right;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 29px;
	text-align: center;
	font-size:10px;
	background-color:blue;
	color:#FFF;
}
  
.btn_apply {
    float: left;
	display: inline-block;
	box-sizing: border-box;
	width: 50%;
	padding: 10px 17px;
	text-align: center;
	font-size:10px;
	background-color:red;
	color:#FFF;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="btn-group">
            <button class="btn btn-primary" data-toggle="dropdown" type="button">Car brand</button> <button class="btn btn-primary dropdown-toggle"
            data-toggle="dropdown" type="button"><span class=
            "caret"></span></button>
            <div class="dropdown-menu car-brand">
                <div class="typeahead-box">
                    <input class="car brand" placeholder=
                    "Car brand" type="text">
                </div>
                <div style="position: relative;">
                    <div class=" scrollable-menu" style="margin-bottom: 70px;">
                        <ul>
                          <li>mercedes</li>
                          <li>audi</li>
                          <li>volvo</li>
                          <li>renault</li>
                          </ul>
                      
                        <div class="div_form">
                            <span class="btn_apply">Apply</span> <span class=
                            "btn_clear">Clear</span>
                        </div>
                    </div>
                </div>
            </div>