showing and hiding divs by clicking a button - javascript

I have four divs, the first is showing on load of the site. I am currently hiding the other three on load with CSS (display: none)
Within that first div that is showing, I have a button that on click, I want to hide the current div and then show the next div.
<div id="one">
<h3>Placeholder</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder</h3>
</div><!--Closes Four-->
So im looking to create some Jquery to make this happen.
Here's the janky code I have that doesnt really work at all...
$("#next1").click(function(){
$("#two").show();
$("#one").hide();
});
$("#next2").click(function(){
$("#three").show();
$("#two").hide();
});
$("#next3").click(function(){
$("#four").show();
$("#three").hide();
});
Forgot CSS, my apologies!
#two, #three, #four {
display: none;
}
I assume I dont need to explicitly say to hide all three divs every time due to CSS already hiding two through four, and then altering one at a time through Jquery.
Thank you ahead of time!

This should do it:
(you used classes instead of ids for your elements)
$("#next1").click(function(){
$("#two").show();
$("#one").hide();
});
$("#next2").click(function(){
$("#three").show();
$("#two").hide();
});
$("#next3").click(function(){
$("#four").show();
$("#three").hide();
});
#two, #three, #four {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<h3>Placeholder 1</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder 2</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder 3</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder 4</h3>
</div><!--Closes Four-->

So this is the simple query which you are looking after
$(".btn-default").click(function(){
$(this).closest('div').hide(); //Gets the closest div associated with your button click
$(this).closest('div').next('div').show(); //hide the next div
});

try this
$("button.btn-default").click(function(){
$(this).closest('div').hide();
$(this).closest('div').next('div').show();
});
#two, #three, #four {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one">
<h3>Placeholder 1</h3>
<form>
<button id="next1" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes One-->
<div id="two">
<h3>Placeholder 2</h3>
<form>
<button id="next2" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Two-->
<div id="three">
<h3>Placeholder 3</h3>
<form>
<button id="next3" type="button" class="btn btn-lg btn-default">Next</button>
</form>
</div><!--Closes Three-->
<div id="four">
<h3>Placeholder 4</h3>
</div><!--Closes Four-->

It's not necessary to give each div it's own class or ID.
You could give them all the same class and use the jQuery eq: filter to choose the correct div.
Example code:
$(".custom button").click(function(){
var nextDiv = $(this).attr('data-id'); // Usually a +1 for the next div, but since eq filter is zero based, it works in this case.
$('.custom').hide();
$('.custom:eq(' + nextDiv + ')').show();
});
Working example: https://jsfiddle.net/ore5h6tk/
Another example, hiding all but the first with CSS: https://jsfiddle.net/ore5h6tk/1/
Hope this helps.

Actually there is nothing wrong with your code .Just make the four divs looks difference.

Related

Slick slider method 'slickPrev' not firing inside bootstrap modal when input gains focus

I am using slick slider and its methods 'slickPrev' and 'slickNext' inside bootstrap modal to slide some content manually.One slide has a form and everything works perfect until form input gains focus and then I am unable to go back to previous slide using the button that triggers 'slickPrev' method.
The problem occurs only on mobile browsers, so far chrome for android.
I've tried to reproduce the problem outside of the modal but it seems the problem occurs only inside of it as you can see in this jsfiddle: https://jsfiddle.net/3x4bum5h/1/ where
$('body').on('click','.back-to-content',function(){
$('.wl-items-swipe').slick('slickPrev');
$('body').find('.modal-footer .btn-group').html('<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button><button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>');
});
only makes the input lose focus otherwise it works as it should when no focus on input.
Ok I've found a solution.To make it work I had to remove the buttons that trigger slides from the footer and put them inside the slides.
Here is the working fiddle: https://jsfiddle.net/yjex03gf/
<div class="wl-content">
<p id="some-content">Lorem ipsum dolor sit amet.</p>
<div class="btn-group">
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
<button type="button" class="btn wl-next-step">Next step <i class="fa fa-arrow-right"></i></button>
</div>
</div>
<div class="wl-form">
<form id="w-items-form">
<div class="form-group">
<label for="email" style="font-weight:bold;font-size:14px">Email</label>
<input type="text" class="form-control wl-email" placeholder="Email"/>
</div>
<div class="form-group">
<label for="phone" style="font-weight:bold;font-size:14px">Phone<span style="color:red">*</span></label>
<input type="tel" class="form-control wl-phone" max="15" placeholder="Phone number"/>
</div>
<div class="form-group text-center">
<button type="button" class="btn btn-wl-submit" style="font-size:14px;">Send <i class="fa fa-send"></i></button>
</div>
</form>
<div class="btn-group">
<button type="button" class="btn btn-default back-to-content" style="border-right: 2px solid #ececec;"><i class="fa fa-arrow-left"></i> Back</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close <i class="fa fa-times"></i></button>
</div>
</div>
<style>
.modal{
display:block!important;
z-index:-1;
}
.modal-open .modal{
z-index:1080;
}
</style>

Show text when hover over button jQuery

I am trying to show a line of text under a row of buttons. The text shown depends on the button you hover over. I'm having trouble using .hover() and .show() with my buttons and my text. I want to have it so the text is on a line below the buttons and if you are not hovering on a button, no text is shown. Once you click the button, the text associated with it stays on the page. I'm using Bootstrap, and as of now I have the classes of the various text possibilities hidden using CSS display:none. When I tried to hide them using jQuery under the document.ready, I couldn't seem to hide them. Perhaps it is how I have the text set up in the html code? Below is a link to the JSFiddle. Thank you in advance!
HTML
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
JavaScript
$('.btn-1').hover(function(){
$('.b-1-text').show();
});
$('.btn-2').hover(function(){
$('.b-2-text').show();
});
$('.btn-3').hover(function(){
$('.b-3-text').show();
});
$('.btn-4').hover(function(){
$('.b-4-text').show();
});
$('.btn-5').hover(function(){
$('.b-5-text').show();
});
CSS
.col-xs-5ths {
width: 20%;
float: left;
}
.b-1-text{
display: none;
}
.b-2-text{
display: none;
}
.b-3-text{
display: none;
}
.b-4-text{
display: none;
}
.b-5-text{
display: none;
}
https://jsfiddle.net/anbenya/h7fua94s/2/
You can simplify this quite a bit and just have a single $.hover(). Updated your code to reflect that with a data-id attribute on the buttons that will toggle the appropriate text box.
And you can toggle a .selected class to the text boxes when you click on a button that will make that text box always shown until you click the button again.
$(document).ready(function() {
$('.btn').hover(function() {
var id = $(this).attr('data-id');
$('.b-' + id + '-text').show();
}, function() {
$('.b-text').hide();
}).on('click',function() {
var id = $(this).attr('data-id');
$('.b-' + id + '-text').toggleClass('selected');
});
});
.col-xs-5ths {
width: 20%;
float: left;
}
.b-text {
display: none;
}
.selected {
display: block!important;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="container-fluid text-center">
<div class="row">
<h1>Title</h1>
</div>
<div class="row">
<div class="col-xs-5ths">
<button type="button" class="btn btn-primary btn-circle btn-1" data-id="1"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-info btn-circle btn-2" data-id="2"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-success btn-circle btn-3" data-id="3"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-warning btn-circle btn-4" data-id="4"></button>
</div>
<div class="col-xs-5ths">
<button type="button" class="btn btn-danger btn-circle btn-5" data-id="5"></button>
</div>
</div>
<div class="row btn-text">
<div class="b-1-text b-text">
<h3>Button 1 Text</h3>
</div>
<div class="b-2-text b-text">
<h3>Button 2 Text</h3>
</div>
<div class="b-3-text b-text">
<h3>Button 3 Text</h3>
</div>
<div class="b-4-text b-text">
<h3>Button 4 Text</h3>
</div>
<div class="b-5-text b-text">
<h3>Button 5 Text</h3>
</div>
</div>
</div>
</body>
Firstly, there was a missing ( at the end and secondly JQuery wasn't selected in your JSFiddle.
$(document).ready(function() {
$('.btn-1').hover(function() {
$('.b-1-text').show();
});
$('.btn-2').hover(function() {
$('.b-2-text').show();
});
$('.btn-3').hover(function() {
$('.b-3-text').show();
});
$('.btn-4').hover(function() {
$('.b-4-text').show();
});
$('.btn-5').hover(function() {
$('.b-5-text').show();
});
})

How to change visible button in div?

Hello guys I have some code:
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
When i use $("button.btn.approve").addClass("disabled"); the buttons from div a and div b are disabled. How to disabled button-approve only from div a?
If you click the button, you only want to add class to the buttons in the same group?
If so do this:
$('.btn-group .btn').click(function(){
$(this).parent().children('.btn').addClass('disabled');
});
.disabled {
color: #bbb;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="a">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
<div class="b">
<div class="btn-group">
<button class="btn make-editable" data-name="GlobalCorrelationMatrix" data-action="edit-row">Edit</button>
<button class="btn make-approve" data-name="GlobalCorrelationMatrix" data-action="approve-row">Save</button>
<button class="btn make-close" data-name="GlobalCorrelationMatrix" data-action="discard-row">Close</button>
</div>
</div>
You just have to change your selector and make it more general to include your .a class:
$(".a > .btn-group > button.btn.approve").addClass("disabled");`
Select buttons only within the div has class a by updating the selector.
$("div.a button.btn.approve").addClass("disabled");
Try something like this :
$(".a button.btn.approve").addClass("disabled");
.b>.button.btn.approve
You need to define exact element because
button.btn.approve
Matches all buttons, you can add additional class or ID too

AngularJS Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found

I have a main template to do some wizard like stepping through some templates:
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
However when I click on the first button to render the next template I get the error
Controller 'ngSwitch', required by directive 'ngSwitchWhen', can't be found
When I look at the source after clicking the button the ng-switch div tag is there so I am not sure why it is not working.
I'm pretty sure you're missing some closing elements. I reformatted the code as written.
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
With the missing elements
<div ng-controller="StepController">
<div ng-switch="step">
<div ng-switch-when="1">
<div ng-controller="ImportController">
<div ng-include src="'static/javascripts/import/upload.html'">
</div>
<button type="button" class="btn btn-success btn-s" ng-click="setStep(2)"> Next Step</button>
</div>
</div>
<div ng-switch-when="2">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button type="button" class="btn btn-success btn-s" ng-click="setStep(3)"> Next Step</button>
</div>
</div>
<div ng-switch-when="3">
<div ng-include src="'static/javascripts/authentication/blank.html'">
<button ng-click="setStep(3)"></button>
</div>
</div>
</div>
</div>
The issues is that in the incorrect code, the second and third ng-switch-when elements are not directly below the ng-switch element. ng-switch-when looks at it's parent element for the ng-switch statement, which is missing.

How to select a button and delete a grandparent div of that button when the button is clicked?

This here is my code.
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).parent().remove();
});
});
<div class="row lead" style="margin-left:100px;color:red">
<div class="col-md-2"><span style="color:red></div>
<div class="col-md-2"><span style="color:red"></div>
<div class="col-md-2"><span style="color:red"></div>
<div class="col-md-2"><span style="color:red"></div>
<div class="col-md-3">
<button type="button" class="btn btn-default btn-lg remove"> </button>
<button type="button" class="btn btn-default btn-lg"></button>
<button type="button" class="btn btn-default btn-lg"></button>
</div>
</div>
I want the entire div to get deleted when the button of class="btn btn-default btn-lg remove" gets clicked. I cant use id because i am dynamically appending the above div using append jquery.
You can use closest
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).closest('.row').remove();
});
});
I guess you just want to get one level higher?
This deletes the whole div "row lead".
$(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).parent().parent().remove();
});
});
use closest() in jquery
 $(document).ready(function(){
$(".btn.btn-default.btn-lg.remove").click(function(){
$(this).closest(".row.lead").remove();
});
});

Categories