I've got a page with 2 buttons and 2 divs which are hidden.
When you click the first button the first div should appear, and if you click the second button the second div should appear.
I've managed to get that to work, but what I can't get to work is, that if I have the first div open, and click the second button, I would like it to show the second div and close the first div.
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("vis");
$(".hg_facebook").toggleClass("skjul");
});
});
$(document).ready(function() {
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("vis");
$(".hh_facebook").toggleClass("skjul");
});
});
Here is my fiddle:
http://jsfiddle.net/4mWLk/4/
Best regards
Martin
your js code is a bit incorrect.
You call twice $(document).ready(function() { ... Is enough once time.
try this:
$(function(){
$("button.hh").on("click", function(){
$(".hh_facebook").show();
$(".hg_facebook").hide();
});
$("button.hg").on("click", function(){
$(".hh_facebook").hide();
$(".hg_facebook").show();
});
});
see the updated fiddle: http://jsfiddle.net/4mWLk/5/
update if you want to hide div after clicking on same button: http://jsfiddle.net/4mWLk/8/
Use toggle instead of show (for your comment at my answer)
PS: I updated CSS because there was not neccessary.
If you want it with classes so you can have more control over the effect in case you decide to change it later, you should do it like this:
http://jsfiddle.net/4mWLk/7/
$(document).ready(function() {
$('button.hh').click(function() {
$(".hh_facebook").toggleClass("skjul vis");
$(".hg_facebook").removeClass("vis").addClass("skjul");
});
$('button.hg').click(function() {
$(".hg_facebook").toggleClass("skjul vis");
$(".hh_facebook").removeClass("vis").addClass("skjul");
});
});
Html:
<div class="hh_facebook skjul">test1</div>
<div class="hg_facebook skjul">test2</div>
What it does is like this:
first the divs start with skjul class so they are in hidden state.
when a button is pressed, toggle both the skjul and vis classes (one is removed, the other is added)
make sure the second div is hidden.
Related
I'm a novice in jQuery coding, and I need help with my code.
I have a button that allows me to reveal a hidden section on my website, but at the moment the button remains even though I want him to disappear.
My website is built with Wordpress and Divi.
With the following code, you will have my latest attempt with the hide/show value in CSS.
<style type="text/css">
.rv_button.closed:after {content:"";}
.rv_button.opened:after {content:"";}
.hide {display:none;}
.show {display:block;}
</style>
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
});
});
</script>
If you want to see what it looks like, you can see the example here: https://divinotes.com/reveal-a-hidden-divi-section-row-or-module-on-button-click/
You're toggling classes named opened and closed, while your CSS shows that hide and show are the ones affecting element's presence in the final render of the page. Also there's probably no need for most classes. You can just add the hide one.
Chance your last non-trivial line to
jQuery('.rv_button').addClass('hide');
If you already have show class applied to the button, then your original idea makes sense. You just need to change the classes to match the ones you defined in styles.
jQuery('.rv_button').toggleClass('show hide');
Just add $(this).hide() in your click function.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('#reveal').hide();
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery("#reveal").slideToggle();
jQuery('.rv_button').toggleClass('opened closed');
// Hide button
$(this).hide()
});
});
</script>
Thanks everyone for your involvment in my question. I managed to use the solution of #vmf91 which works like a charm. Thanks again guys and have a lovely day.
Do you want to remove the button after clicking over it? If so, you just need to insert the following line inside the button event:
jQuery(this).hide();
The complete click event:
jQuery('.rv_button').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery("#reveal").slideToggle();
//You don't need this if you want to hide the button
//jQuery('.rv_button').toggleClass('opened closed');
});
I have a table. Each column has a button at the top. If the td elements below within the column have content in them, then hide the button. If not then display the button and onClick add class active too the td element.
$(document).ready(function (){
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
$(this).hide();
else
$(this).show();
});
<!-- Fill in the td -->
$('.button-fill').on("click", function() {
var i=$(this).parent().index();
$(this).closest("tr").siblings().find("td:eq("+i+")").addClass("active");
//});
});
});
http://jsfiddle.net/ujw0u6au/
I've created a jsfiddle. I don't know what i'm doing wrong? Thank you
Since you have bind the button toggle logic inside button click - you will always have the button in the starting. When you will click on the button only then it will first hide the button and then make the content active.
In case you want this behavior in the starting as soon as the page loads, you should change below line (the 2nd line in your code) from your code -
$('.button-fill').on("click", function() {
to
$('.button-fill').each( function(i,e) {
also, you should not use <!-- Fill in the td --> style of commenting in JavaScript.
I can see you are having two "click" event handler on same class. Instead of it, you can merge it as well.
Here is the optimized version of your code :
JavaScript :
$(document).ready(function (){
$('.button-fill').on("click", function() { //Only one click event handler
var $this = $(this);
var i=$this.parent().index();
var $trSibling = $this.closest("tr").siblings();
$this.toggle($trSibling.find("td:eq("+i+")").addClass("active").text() != ""); //adds the class as well and check the text as well.
})
$(".button-fill").trigger("click");
// explicitly clicking on button to make sure that initially button should not be shown if column text is not empty
});
JSFiddle link : http://jsfiddle.net/ujw0u6au/1/
Is this the same what you want?
#Vijay has the right answer, but as a side note, you need to change this:
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()=="")
to this
if($(this).closest("tr").siblings().find("td:eq("+i+")").text()!="")
if you want to hide the button when there is content, instead of the other way around (notice the != near the end).
I have a group of records which are split into segements of 5 each wrapped around a div with an id and class.
e.g.
<div id="myid" class="myclass">
<p>record1</p>
<p>record2</p>
</div>
The first set of 5 records are displayed and the rest are hidden.
I have a link underneath that has click for more. Once clicked it will then show another 5, etc etc.
Each container has a class with an Off and an On. This tells me what div is showing and what div isnt.
Now I want to show each set of records on each indivudual click of the click.
I have done this code but does not seem to work. My knowledge in jquery is limited.
$(document).ready(function () {
// get first reviewBulkContainer and show
$(".reviewBulkContainer:first").show().addClass("On");
$("#showMoreReviews").click(function (e) {
e.preventDefault();
$("#reviewContainer .reviewBulkContainer").each(function () {
if ($(this).hasClass("Off")) {
$(this).show();
$(this).removeClass("Off");
$(this).addClass("On");
return;
}
});
});
But this ends up showing all record segments and not just one as a time.
Could anyone help me on this?
Thanks...
There is no need to use each method, you can use :first selector if you want to show the first element with class of Off.
$("#showMoreReviews").click(function (e) {
e.preventDefault();
$("#reviewContainer .reviewBulkContainer.Off:first")
.show()
.toggleClass("Off On");
});
i am trying to make a div toggle another div which appears underneath it.
I have managed to do this with a button, however i was wondering if you could do this with another div, so that when you clicked anywhere inside the div, it would make the other div appear and disappear etc...
Here are the two divs i have
//This div is the one you click on
<div id="more_toggle"></div><!---end more_toggle--->
//This div is the one that appears and disappears through the toggle
<div id="more_info">hello</div><!---end more_info--->
This is the script i use to toggle the divs through buttons, but it doesn't work with another div
$(function(){
$("#server_status_button").click(function(event){
event.preventDefault();
$("#status1").slideToggle();
});
});
Thanks for any help
$("#more_toggle").click(function(event) {
$("#more_info").slideToggle();
});
jsFiddle example
Have you tried:
$(function() {
$('#more_toggle').click(function(e) {
$('#more_info').slideToggle();
});
});
If you want to hide use display toggling just try .toggle() instead of .slideToggle().
$('#more_toggle').click(function(){
$('#more_info').slideToggle();
});
I would like to show a <div> that displays "Saved!" every time the user clicks the save button.
I have here some jQuery code but it works only once. The second time I click the button the div won't show up.
$("#loading").html("Saved!").fadeOut(4000);
Possibly because it is hidden. Try:
$("#loading").html("Saved!").show().fadeOut(4000);
Or
$("#loading").html("Saved!").fadeIn(200).fadeOut(4000);
That is because the div is still "faded out"
try this...
$("#loading").html("Saved!").fadeOut(4000, function(){
$("#loading").empty();
$("#loading").show();
});
It empties the #loading div and then re-displays it and readies it for the next click.
You need to bind a click event to a a div.
$(document).ready(function() {
$('#element').click(function() {
$('#para').html("Saved!").fadeOut(4000);
});
});