Show/Hide using toggle jQuery - javascript

jQuery Script
This code works, But Is it possible to add 'options' inside the slideToggle method so that I toggle 'Show/Hide' text?
$(function() {
var container = $('div.container p'),
button = $('div#click');
container.hide();
button.on('click', function() {
if (button.text() == 'Show') {
button.text('Hide');
} else {
button.text('Show');
}
$(this).next().slideToggle(300);
});
});
http://jsfiddle.net/sachq/mt3duxzk/1/

You can go ahead and give this a try. You may also change the "complete" option to "start" if you want the callback to fire as soon as you click the button.
DEMO: HERE'S A FIDDLE
var container = $('div.container p');
var button = $('div#click');
container.hide();
button.on('click', function(){
container.slideToggle({
duration: 200,
complete: function(){
var txt = (button.text() === 'Show') ? "Hide" : "Show";
button.text(txt);
}
});
});

I can suggest better approach. The idea is that you should not hardcode your button texts into javascript code. It makes code very obtrusive and tightly coupled, because if you decide to change the text from "Show" to "Show more" you will have to modify javascript code as well. Instead you can have both labels in place but show only one at a time:
<div id="click"><span class="show">Show</span><span class="hide">Hide</span></div>
Javascript:
button.on('click', function () {
button.toggleClass('hide');
$(this).next().slideToggle(300);
});
and CSS:
div#click > span {
display: none;
}
div#click .show {
display: inline-block;
}
div#click.hide .hide {
display: inline-block;
}
div#click.hide .show {
display: none;
}
UPD. Apparently someone disagrees with me. But it is easy to see that the benefits of slightly increased amount of code are bigger then it might look at first. Approach described above is much more flexible then comparing text strings. Not to mention it also allows advanced styling of the buttons with images and other elements which could be problematic with hardcoded strings.
Demo: http://jsfiddle.net/mt3duxzk/3/

You can't do that, but you can simplify things to ternary operator.
button.text(function(_, txt){
return txt == "Show" ? "Hide" : "Show"
}).next().slideToggle(300);

Related

How to give !important in javascript

I am hiding one div and showing another. But I can't hide first div when the second is block. I think that's because first is bootstrap and need to overwrite to display with !important to run display: none; correctly. But how can I use the it in Javascript.
function switchVisible() {
if (document.getElementById('main-card')) {
if (document.getElementById('main-card').style.display == 'none') {
document.getElementById('main-card').style.display = 'block';
document.getElementById('map').style.display = 'none';
}
else {
document.getElementById('main-card').style.display = 'none';
document.getElementById('map').style.display = 'block';
}
}
}
I tried 'none !important' but that doesn't work.
How about using Jquery much more simple. And it'll fix your problem.
$('body').on("click touchstart", "#Button1", function(e){
$("#main-card, #map").toggle();
});
you can use inline css style by jquery:
$('body').on("click touchstart", "#Button1", function(e){
$("#main-card).css("display","none");
});
inline css is nearly !import

change active menu-items font on click

So, i've got this menu which is linked to some dynamically displayed content, I've been trying to write some js-code that changes the font of the currently active item. My problem is now that it never deselects that item if it isn't active anymore.
jsfiddle:
https://jsfiddle.net/z4uhL5wv/2/
jquery:
$(document).ready(function() {
$("a.menu2").click(function(e) {
$('.ShowClickedContent').html($($(this).attr('href')).html()); //dynamic content
var clicks = 0;
if(clicks % 2 == 0){
$(this).css('font-family','gillsans');
}else{
$(this).css('font-family','gillsanslight');
}
++clicks;
});
});
Any help would be greatful. Note: i need to use that exact showClickedContent query in the final solution due to problems arising with margin otherwise.
https://jsfiddle.net/ynrnt6xL/
$(document).ready(function() {
const buttons = $('.menu2');
const clear = function() {
$.each( buttons, function(index, btn) {
$(btn).removeClass('selected');
})
}
$.each( buttons, function(index, btn) {
$(btn).click( function(e) {
clear();
$(this).addClass('selected');
});
});
});
You can do it with CSS! I didn't mess with fonts, but I did it with font-size as an example:
a:active, a:focus {font-size:15px;}
Just replace the font-size with font-family and whatever...

Showing/hiding bootstap's .hidden-xs in jQuery

I'm trying to create an 'up' button, which will take user to the very top of the landing page. jsFiddle
I would like this button to be shown only on devices with large screens, so I'm using bootstrap3's hidden-xs class. This class applies display: none!important for small devices and display: block!important for large screens.
But now, I would like to make this button visible only, when scrolled down at least 50 pixels.
So, I would like to do something like:
$(document).ready(function() {
$(window).scroll(function() {
if($(window).scrollTop() < 50) {
// Near top.
$('#scrollUp:visible').slideUp();
}
else {
$('#scrollUp:hidden').slideDown();
}
});
});
jQuery's slideUp() and slideDown() apply display: none and display: block, but without !important.
This means that display: block!important applied by .hidden-xs is more important than css applied by slideDown() and slideUp().
It worked great until I started using .hidden-xs.
I tried $.animate({'display': 'none!important'}) instead of $.slideUp, but then I get another problem -- jQuery isn't properly selecting elements with :hidden. jsFiddle
Do you have an idea, what may I do wrong? Is there a way to do this nicely?
Thanks in advance!
Try
(function () {
var timer;
$(window).scroll(function () {
clearTimeout(timer)
timer = setTimeout(function () {
if ($(window).scrollTop() < 50) {
// Near top.
console.log('If elemnt is visible it should be hidden here');
$('#scrollUp:visible').stop(true, true).slideUp(function () {
$(this).removeClass('hidden-xs');
});
} else {
console.log('If element is hidden it should be displayed here');
$('#scrollUp:hidden').addClass('hidden-xs').stop(true, true).slideDown(function () {
$(this).css('display', '')
});
}
}, 100);
});
})()
Demo: Fiddle

How can I use jQuery to toggle between 2 classes?

I am not sure toggleClass is the best way to do this, but I have a accordion menu and I am attempting to alternate the icon/image on the right side from a RIGHT arrow to a DOWN arrow.
The first click on the 3 menu items shows the DOWN image (.icon-03) but when I switch between the accordion items it does not go back to the RIGHT arrow image/class (.icon-04).
thoughts?
/* Accordion */
$(document).ready(function () {
$('#accordionFAQ > li > a').click(function(e){
if ($(this).attr('class') != 'active'){
$('#accordionFAQ li ul').slideUp();
$(this).next().slideToggle();
$('#accordionFAQ li a').removeClass('active');
$(this).addClass('active');
//add down arrow
$('> span', this).toggleClass('icon-03 icon-04');
//prevent page reload
e.preventDefault();
}
});
});
Demo JS Fiddle: http://jsfiddle.net/957Fs/
First of all, $(this).attr('class') != 'active' is very inefficient (and possibly fails to work altogether), use $(this).hasClass('active') instead.
After your comment, I re-added the classes - the following should work:
$('#accordionFAQ > li > a').click(function(e){
if (! $(this).hasClass('active') ){
$('.active')
.find('span').toggleClass('icon-03 icon-04')
.end().removeClass('active')
.next().slideUp();
$(this).find('span').toggleClass('icon-03 icon-04')
.end().addClass('active')
.next().slideDown();
//prevent page reload
e.preventDefault();
}
});
When I look at the JSFiddle example it works for me, so I guess it's updated already. I'd like to make a suggestion though: it's perhaps a good idea to just toggle a class (e.g. 'is-active') on your list items and handle the rest with pure CSS. For example:
var $faq = $('#accordionFAQ');
$faq.on('click', '> li > a', function (event) {
$(this).parent().toggleClass('is-active');
});
In your CSS you could do something like this:
#accordionFAQ > li > a span {
// width, height etc
background-position: x y;
}
#accordionFAQ > li.is-active > a span {
background-position: x y;
}
Just an idea; hope it's helpfull.
/* Accordion */
$(document).ready(function () {
var accordionFAQ = $('#accordionFAQ');
// let's use jQuery's .on() rather than .click()
accordionFAQ.find('a').on({
click:function(e){
// prevent the default action
e.preventDefault();
// setup some variables
var that = $(this);
// close open ULs
accordionFAQ.find('ul').slideUp();
// remove .active from other controller
accordionFAQ.find('.active').removeClass('active');
// add .active to clicked controller and show UL
that.addClass('active').next().slideDown();
// remove .right from span
accordionFAQ.find('.right').removeClass('right');
// add .right to current controller's span
that.find('span').addClass('right');
}
});
});
Then, you can have span's default image be the left arrow. and when you add a .right class, it will override the default image with a right arrow using CSS.
hope this helps.

Can't hide element on click for some reason

I have an element on my website, it looks like so:
<div class="nw_help"><div class="nw_help_content">...</div></div>
Easy stuff. Using CSS on nw_help:hover, nw_help_content becomes visible. In order to support touchscreens too, I have written the following:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).css('visibility', 'hidden');
});
});
The first function works flawlessly, the second one doesn't wanna work at all. I've checked if $('.nw_help_content').css('visibility', 'hidden'); is working in browser's console and it is.
Any ideas?
Thanks so much in advance for your answer.
Edit: Now it hit me: the first function is triggered on clicking nw_help_content as well and it "neutralizes" the second function. But how to prevent it?
I believe if you have the visibility hidden on page render, the element is never rendered. You'll need event delegation:
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").css('visibility', 'visible');
});
$(document).on('click', '.nw_help_content', function() {
$(this).css('visibility', 'hidden');
});
});
Also, only one DOM ready statement is needed.
Demo: http://jsfiddle.net/7sM3L/4/
I suggest staying away from direct CSS rule manipulation on this. Just using jQuery show and hide will provide a more solid/reliable result.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find('.nw_help_content').show();
});
});
$(document).ready(function() {
$('.nw_help_content').click(function() {
$(this).hide();
});
});
It is actually working/ Since the divs are nested you are both events fire and the div is hidden and shown on same click.
use toggle instead.
$(document).ready(function() {
$('.nw_help').click(function() {
$(this).find(".nw_help_content").toggle();
});
});
Check out the fiddle
As Zenith says, this is due to event bubbling... Another solution is to bind the event only to the outer container and simply check for the visibilty:
$(document).ready(function() {
$('.nw_help').click(function() {
var content = $(this).find('.nw_help_content');
if(content.css('visibility') == 'hidden') {
content.css('visibility','visible');
} else {
content.css('visibility','hidden');
}
});
});

Categories

Resources