I'm creating a new site and I want to add a button that hides certain sections of the site when clicked. Right now I'm using the code below and it works fine but I just need it to do one more thing. How can I make it add a new class to the button when it's clicked so I can reposition the clicked button using css? Thanks in advance!
Here is the js code i'm using right now.
$(".hide-content").click(function() {
$(".site-header, #page-entry, .site-footer").toggle(500);
});
$(".hide-content").toggle(function() {
$(this).text("Hide");
}, function() {
$(this).text("Show");
});
});
Try .addClass()
$(".hide-content").click(function() {
$(".site-header, #page-entry, .site-footer").toggle(500);
$(this).addClass('ClassName'); //add class
});
Also Read Class Attribute
.toggleClass()
.removeClass()
this
.toggle() has been deprecated and removed
$(".hide-content").click(function () {
$(".hide-content").addClass("new-class")
$(".site-header, #page-entry, .site-footer").toggle(500);
});
$("body").on('click', '.hide-content', function (e) {
var $el = $(this);
$(".site-header, #page-entry, .site-footer").toggle(500, function () { //when complete..
$el.addClass('myclass');
});
});
Use the addClass function
$(".hide-content").click(function() {
$(this).addClass("class-name")
$(".site-header, #page-entry, .site-footer").toggle(500);
});
Or you could do css directly on jquery using the .css function
$(".hide-content").click(function() {
$(this).css("position", "absolute"); //note that params in css function is only an example, do what you need..
$(".site-header, #page-entry, .site-footer").toggle(500);
});
Related
I have a scenario,where footer must be collapsed based on device.Here,I used toggle class for collapse in mobile device,the toggle click is not working.
JavaScript code:
// Code goes here
$(function() {
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
});
Plunker
Any help would be appreciated.
Thanks in Advance.
Just write your JS like this -
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
Your updated Plunker
Batter practice is write code in ready function
$(document).ready(function(){
$('.footer-links-holder h3').click(function () {
$(this).parent().toggleClass('active');
});
})
$(function() {
$('.footer-links-holder h3').off().click(function () {
$(this).parent().toggleClass('active');
});
});
I got a question regarding the toggle functionality of jQuery. I want to achieve that if I click on the arrow the content becomes visible and all other contents are hidden.
I use this JS code to toggle the class within a generic way:
$(function () {
$('.main-diff .blue-bg .arc_arrow').click(function () {
$(this).toggleClass('arc_arrow--displayed');
$(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');
});
});
To look at my HTML code and CSS you could have a look here: JSFIDDLE
I tried to add $('.matchfooter').removeClass('matchfooter--displayed'); but that does not hide the content anymore if I click again on the same arrow.
You need to remove class from other elements, which can be achieved using .not() selector.
$('.main-diff .blue-bg .arc_arrow').click(function () {
//Hide others
$('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed');
$('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed');
$(this).toggleClass('arc_arrow--displayed');
$(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');
});
DEMO
Instead of toggle you can just add class and remove it on clicking others.
$(function () {
$('.main-diff .blue-bg .arc_arrow').click(function () {
//Hide others
$('.main-diff .blue-bg .arc_arrow').not(this).removeClass('arc_arrow--displayed');
$('.main-diff .blue-bg .arc_arrow').not(this).parent().next('.matchfooter').removeClass('matchfooter--displayed');
$(this).addClass('arc_arrow--displayed');
$(this).parent().next('.matchfooter').addClass('matchfooter--displayed');
});
});
Fiddle
I have solved your issue, just change the jquery code with following and try again :-
$(function () {
$('.main-diff .blue-bg .arc_arrow').click(function () {
$(this).toggleClass('arc_arrow--displayed');
$(".matchfooter").removeClass("matchfooter--displayed");
$(this).parent().next('.matchfooter').toggleClass('matchfooter--displayed');
});
});
i have a link on html
Veja aqui ยป</p>
and i'm using .on() to do a transition and load content from a external file
$(document).on("click", '#instalacoesbutton', function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
any idea why this doesn't work?
if i do:
$("#instalacoesbutton").on("click", function(){
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
it works, for the 1st click, but doesn't after the page has been generated dinamically
Here you go:
jQuery:
$(document).ready(function() {
$("#instalacoesbutton").on("click", function() {
$("#maincontent").slideUp(1000, function () {
$("#maincontent").load("instalacoes.html #instalacoes");
}).delay(500).slideDown(1000);
});
});
Try it yourself on jsFiddle
If you want the action to fire on all future elements which match that selector, you can set up a click on the document and look for a clicks on that item. This would look something like:
$(document).click(function (e) {
if ($(e.target).is(".testSelector")) {
// do stuff to $(e.target)
}
});
I have this code in html:
<div class="sub-status">
<p class="subscribed"><i class="icon-check"></i> Subscribed</p>
</div>
On hover, I want that to be changed to:
<div class="sub-status">
<p class="unsubscribe"><i>X</i> Unsubscribe</p>
</div>
And, I have this code in jQuery:
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
});
$('.sub-status').mouseleave(function() {
$('this').html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
The first function is working great. When I mouseover that div, it is changed to what I want, but the mouseleave is not working. I want that when I put my mouse out of that div, its data will return to like it was before. I can't get this working. Any help would be appreciated.
Thanks.
Change
$('this')...
to
$(this)...
And you can use hover() instead of using two separate functions:
$('.sub-status').hover(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
Updated
Your fiddle isn't working since you are updating the entire content of the hovered element - update just the text in <p> should work.
$('.sub-status').hover(function() {
$(this).children('p')
.removeClass()
.addClass('unsubscribed')
.html("<i>X</i> Unsubscribe");
},function() {
$(this).children('p')
.removeClass()
.addClass('subscribed')
.html("<i class='icon-check'></i> Subscribed");
});
Working fiddle
Here, try this. Working demo: http://jsfiddle.net/XrYj4/3/
$(document).ready(function() {
$('.sub-status').on("mouseenter", function() {
$(this).find("p").prop("class", "unsubscribed").html("<i>X</i> Unsubscribe");
}).on("mouseleave", function() {
$(this).find("p").prop("class", "subscribed").html("<i class='icon-check'></i> Subscribed");
});
});
Try to use a hover function:
$(".sub-status").hover(
function () {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
},
function () {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
}
);
http://api.jquery.com/hover/
Change 'this' to simply this. Also consider chaining, shown below, this helps users with weaker devices load stuff faster.
$(document).ready(function() {
$('.sub-status').mouseenter(function() {
$(this).html("<p class='unsubscribe'><i>X</i> Unsubscribe</p>");
}).mouseleave(function() {
$(this).html("<p class='subscribed'><i class='icon-check'></i> Subscribed</p>");
});
});
I have this script which needs to work on an ipad. It was working on chrome with live, however, moving it to on makes it unresponsive.
Any ideas, I would be grateful!
$("#clickAll").on("click", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$("#clickAll.active").on("click", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
try this
$("#clickAll").on("click", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
updated
as suggested
$(document).on('click',"#clickAll", function(){
$(".welcome1poi").toggle();
$(this).toggleClass("active");
});
since it was working with live() i assume your element with id clickAll is added dynamically so try this
$(document).on("click","#clickAll", function () {
$(".welcome1poi").show();
$(this).addClass("active");
});
$(document).on("click","#clickAll.active", function () {
$(this).removeClass("active");
$(".welcome1poi").hide();
});
you can replace the $(document) selector with your closest element to #clickAll element which will be more efficient
This will delegate the event to the body and it will be caught when it bubbles up the DOM.
$('body').on("click", "#clickAll", function(){
$(".welcome1poi").show();
$(this).addClass("active");
});
$('body').on("click", "#clickAll.active", function(){
$(this).removeClass("active");
$(".welcome1poi").hide();
});
Are you adding and removing the "active" class in order to create a toggle effect? If so, try .toggle(), like so:
$('#clickAll).toggle(
function() { $('.welcome1poi').show(); },
function() { $('.welcome1poi').hide(); });