I have a bootstrap 3 modal and inside I have 3 buttons for my 3 service categories. On click of any of the 3 buttons I’m trying to hide the div with the 3 buttons (.search-box) and show the corresponding div for the button clicked (.location-box, .stylist-box, or service-box).
I have a code pen where the first button works, but the other two do not. Any suggestions. Also if someone has a cleaner way of doing this I’m open to that as well.
You didn’t add the ids on to the other buttons that the jquery is using.
e.g.
<p><a id="show-location-menu" class="btn btn-lg btn-primary" href="#">Service 1</a></p>
<h6 class="or">OR</h6>
<p><a id="show-stylist-menu" class="btn btn-lg btn-warning" href="#">Service 2</a></p>
<h6 class="or">OR</h6>
<p><a id="show-service-menu" class="btn btn-lg btn-info" href="#">Service 3</a></p>
That will open the elements but then you’d need to close them properly.
You are better off waiting for the JS experts around here but here’s my basic solution.
$(document).ready(function () {
$(".btn-toggle").click(function () {
var destination = $(this).attr("href");
$(".search-box").slideUp("slow");
$(destination).slideDown("slow");
});
$(".close").click(function () {
$(".search-box").slideDown("slow");
$(".toggleSearch").slideUp("slow");
});
});
You will need to add (and remove) some new classes and supply hrefs for the destinations to the html like this.
<div class="search-box">
<div class="row">
<div class="col-md-12 text-center buttons-block">
<p><a class="btn-toggle btn btn-lg btn-primary" href="#service1">Service 1</a></p>
<p class="or">OR</p>
<p><a id="show-stylist-menu" class="btn-toggle btn btn-lg btn-warning" href="#service2">Service 2</a></p>
<p class="or">OR</p>
<p><a id="show-service-menu" class="btn-toggle btn btn-lg btn-info" href="#service3">Service 3</a></p>
</div>
</div><!-- close row -->
</div><!-- close search box -->
<div id="service1" class="location-box toggleSearch" style="display: none;">
<h1>Service 1</h1>
<p><a href="#">Option a</a></p>
<p><a href="#">Option b</a></p>
<p><a href="#">Option c</a></p>
<p><a href="#">Option d</a></p>
<p><a class="btn btn-default close" href="#">close</a></p>
</div><!-- close search box -->
<div id="service2" class="stylist-box toggleSearch" style="display: none;">
<h1>Service 2</h1>
<p> <a href="#">Option a</a></p>
<p><a href="#">Option b</a></p>
<p> <a href="#">Option c</a></p>
<p><a href="#">Option d</a></p>
<p> <a class="btn btn-default close" href="#">close</a></p>
</div><!-- close search box -->
<div id="service3" class="service-box toggleSearch" style="display: none;">
<h1>Service 3</h1>
<p> <a href="#">Option a</a></p>
<p><a href="#">Option b</a></p>
<p> <a href="#">Option c</a></p>
<p><a href="#">Option d</a></p>
<p> <a class="btn btn-default close" href="#">close</a></p>
</div><!-- close search box -->
The advantage of the above method is that you can add more or less items without changing the js.
I’m sure one of the js gurus will refine it even more when they look in here 
Note I removed your H6 tags as they are not semantic where you had them as the word 'OR" is not a heading and you can’t jump to heading levels like that anyway. They must be in a logical order. Im not sure that three h1 headings on a page is a good idea either (although html5 does allow).
Your options should probably be a list structure also. Try to make your html semantic and then your half way there already
Thanks Again Paul. That got it working, but it there a way to do it without using href ($(this).attr(“href”))? I have a smooth scroll function on the site that it’s interfering with. So when you click the one of the service button’s it’s trying to scroll down the page.
Instead of using the href you could add a data attribute and get the destination value from that instead.
e.g.
var destination = $(this).data("destination");
...
<a data-destination="#service1" href="#" class= etc...
...
<a data-destination="#service2" href="#" class= etc...
...
<a data-destination="#service3" href="#" class= etc...
Full code.
$(document).ready(function () {
$(".btn-toggle").click(function () {
var destination = $(this).data("destination");
$(".search-box").slideUp("slow");
$(destination).slideDown("slow");
});
$(".close").click(function () {
$(".search-box").slideDown("slow");
$(".toggleSearch").slideUp("slow");
});
});
Then add the data attribute to the html.
<div class="search-box">
<div class="row">
<div class="col-md-12 text-center buttons-block">
<p><a data-destination="#service1" class="btn-toggle btn btn-lg btn-primary" href="#">Service 1</a></p>
<p class="or">OR</p>
<p><a data-destination="#service2" id="show-stylist-menu" class="btn-toggle btn btn-lg btn-warning" href="#">Service 2</a></p>
<p class="or">OR</p>
<p><a data-destination="#service3" id="show-service-menu" class="btn-toggle btn btn-lg btn-info" href="#">Service 3</a></p>
</div>
</div><!-- close row -->
</div><!-- close search box -->
<div id="service1" class="location-box toggleSearch" style="display: none;">
<h1>Service 1</h1>
<p><a href="#">Option a</a></p>
<p><a href="#">Option b</a></p>
<p><a href="#">Option c</a></p>
<p><a href="#">Option d</a></p>
<p><a class="btn btn-default close" href="#">close</a></p>
</div><!-- close search box -->
<div id="service2" class="stylist-box toggleSearch" style="display: none;">
<h1>Service 2</h1>
<p> <a href="#">Option a</a></p>
<p><a href="#">Option b</a></p>
<p> <a href="#">Option c</a></p>
<p><a href="#">Option d</a></p>
<p> <a class="btn btn-default close" href="#">close</a></p>
</div><!-- close search box -->
<div id="service3" class="service-box toggleSearch" style="display: none;">
<h1>Service 3</h1>
<p> <a href="#">Option a</a></p>
<p><a href="#">Option b</a></p>
<p> <a href="#">Option c</a></p>
<p><a href="#">Option d</a></p>
<p> <a class="btn btn-default close" href="#">close</a></p>
</div><!-- close search box -->
On second look it’s not the smooth scroll as I commented that out. Not really sure why, but it’s scrolling the screen down when I click any of the 3 service buttons. I should also mention that this is all inside of a bootstrap modal.
Maybe you need to prevent the default actiion of the element clicked.
e.g.
$(document).ready(function () {
$(".btn-toggle").click(function (e) {
var destination = $(this).data("destination");
e.preventDefault();
$(".search-box").slideUp("slow");
$(destination).slideDown("slow");
});
$(".close").click(function (e) {
e.preventDefault();
$(".search-box").slideDown("slow");
$(".toggleSearch").slideUp("slow");
});
});
That did it. Now it’s working perfectly. Thank Paul!!!
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.