Toggle show/hidden with jquery - javascript

I need to use jquery to toggle two elements to show/hide. I want the button to say "hide text" and change to "show text" when it is clicked and of course I want the text to toggle from show to hide as the button is clicked. I have this to change it one time but I do not know how to change it back or make it toggle.
$(function() {
$('button#1').click(function() {
$('#one').fadeOut();
});
$('button#1').click(function() {
$('button#1').html('Show Text');
});
});

http://jsfiddle.net/fwdzm/1/
Use the toggle callbacks !
$(function() {
var $btn1 = $('button#1').click(function() {
$('#one').toggle('slow', function () {
if ($(this).is(':visible')) {
$btn1.html('Hide Text');
} else {
$btn1.html('Show Text');
}
});
});
});

$('button#1').click(function() {
var $btn = $(this);
$('#one').toggle('slow', function() {
if ($(this).is(':visible')) {
$btn.text('Hide');
} else {
$btn.text('Show Text');
}
});
});

Try something like this
$(function() {
$('button#1').click(function(){
if ($('#one').is(':visible')) {
$('#one').fadeOut();
$(this).html('Show Text');
} else {
$('#one').fadeIn();
$(this).html('Hide Text');
}
});
});

Save the current state in a variable and then based on that variable you either show or hide your elements and change the text on the button.
HTML
<button id="toggleBtn" type="button">Hide Text</button>
<span id="element">Your text is here</span>
JAVASCRIPT
var status = "shown";
function toggleElement() {
if (status == "shown") {
$('#element').hide();
$("#toggleBtn").html('Show Text');
status = "hidden";
} else {
$('#element').show();
$("#toggleBtn").html('Hide Text');
status = "shown";
}
}

Related

Need to toggle CSS slide-in function with click on different div?

I have this JSfiddle and i need to slide in, when clicking on a div, and not when page is loaded. Simultaneously it should be possible to close by clicking anywhere outside the slide-in box.
$( document ).ready(function() {
$(function(){
$(".slide-in").addClass("active");
console.log($(".slide-in"));
});
});
I think the solution could be some kind of toggle system, but i can't figure out how to?
Thank you!
Opens the slider on click of .button. Closes it on click anywhere outside the slider (including the button)
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.className=='slide-in') {
$(".slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.className=='button'){
$(".slide-in").addClass("active");
isOpened = true;
}
});
Better is to use IDs. So your code would be:
<div id="slide-in"></div>
<div id="button"></div>
and the javascript:
var isOpened = false;
$(document).click(function(e) {
if(isOpened && e.target.id!='slide-in') {
$("#slide-in").removeClass("active");
isOpened = false;
} else if(!isOpened && e.target.id=='button'){
$("#slide-in").addClass("active");
isOpened = true;
}
});
You'll also need to change the CSS from classes to IDs
Try this.
var someDiv = document.getElementById('yourDiv');
someDiv.style.cursor = 'pointer';
someDiv.onclick = function() {
//do something
}
how to make div click-able?
https://jsfiddle.net/zer00ne/jne1rasb/
$(document).ready(function() {
$('.button').on('click dblclick', function(e) {
$('.slide-in').toggleClass('active');
e.stopPropagation();
});
$(document).on('click', function() {
$(".slide-in").removeClass("active");
});
});
I think this should do the trick.
Edit:
$( document ).ready(function() {
$(".button").on("click",function(){
if($(".slide-in").hasClass("active")){
$(".slide-in").removeClass("active");
}else{
$(".slide-in").addClass("active");
}
});
});

Jquery: changing text inside a button when toggle 'show'

I've created a toggle button to show and hide a div, but I'd like the text inside the button to change from 'Show Content' to "Hide Content' as you toggle 'show' on the #content div. This is a little over my head as I'm still learning jQuery. Any help would be much appreciated!
EDIT: I've discovered since I have many posts on a single page, and the code is repeated in all posts, when I click the button to show content on one post it shows the content on all the posts. How can this be remedied?
HTML
<div class="post-content">
<button id='content-button'>Show Content</button>
<div id='content'>Hello World</div>
</div>
CSS
#content
{
display:none;
}
JQUERY
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
jQuery('#content').toggle('show');
});
});
http://jsfiddle.net/syctdh46/
You can do like this,
jQuery(document).ready(function() {
jQuery('#content-button').live('click', function(event) {
$('#content').is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
jQuery('#content').toggle();
});
});
Check the visibility of the div using is(":visible"), then change the text
Fiddle
Edit
jQuery('#content-button').live('click', function(event) {
$(this).next().is(":visible") ? $(this).text("Show Content") : $(this).text("Hide Content");
$(this).next().toggle();
});
You can use a variable to keep when button is clicked and change text:
jQuery(document).ready(function () {
var i = 0;
jQuery('#content-button').live('click', function (event) {
jQuery('#content').toggle('show');
if (i == 0) {
$(this).text("Hide Content");
i = 1;
} else {
$(this).text("Show Content");
i = 0;
}
});
});
fiddle
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
if(jQuery('#content').is(":hidden")){
jQuery(this).text("Hide Content");
jQuery('#content').show();
}
else{
jQuery(this).text("Show Content");
jQuery('#content').hide();
}
});
});
Use .text to change text of button
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
jQuery('#content').toggle('show');
////////////////////////////code to change text
if($('#content-button').text()=="Show Content")
{
$('#content-button').text('hide content');
}
else
{
$('#content-button').text('show content');
}
////////////////////////////
});});
http://jsfiddle.net/syctdh46/11/
try
jQuery(document).ready(function () {
jQuery('#content-button').live('click', function (event) {
jQuery('#content').toggle('show', function () {
if ($(this).is(":visible")) {
$('#content-button').text("Show Content");
} else {
$('#content-button').text("Hide Content");
}
});
});
});
DEMO
I would simply code (sorry for the slide effect, but perhaps you are interested in this too):
JQuery('#content-button').live('click', function(event) {
JQuery("#content").slideToggle("slow",function(){
if (JQuery("#content").css("display")=="none"){
JQuery(this).text("Show Content");
} else {
JQuery(this).text("Hide Content");
}
});
});
Most of the answers are similar here.
Why not innovate and add a custom function here.
$.fn.toggleText = function(t1, t2){
if (this.text() == t1) this.text(t2);
else this.text(t1);
return this;
};
And then just edit you code to use the function. So you can use this function anywhere else in your code. Simplifies thing.
jQuery(document).ready(function(){
jQuery('#content-button').live('click', function(event) {
$(event.target).toggleText('Show Content', 'Hide Content'); //Add this line
jQuery('#content').toggle('show');
});
});

Getting localStorage and adding class to divs

I have a question that is quite confusing.
Everytime I check a "checkbox", it gets the closest "div" and add the class "hilight" and "marked" and set an Item to LocalStorage called "marking".
When I switch from div 1 to 2, I remove the class "hilight", but i keep the class "marked".
I'm trying to get the LocalStorage, and add class "hilight" again to divs that has "marked"
JS Fiddle: http://jsfiddle.net/b4KgV/
HTML
1
2
<button class="1st">show 1st</button>
<button class="2nd">show 2nd</button>
JS
localStorage.clear();
$(document).on('click', ':checkbox', function () {
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem("marking","yes");
}
else {
$(this).closest("div").removeClass('hilight marked');
}
});
$(".1st").on('click', function() {
$(".second").css('display','none');
$(".second").removeClass('hilight');
$(".first").css('display','block');
});
$(".2nd").on('click', function() {
$(".first").css('display','none');
$(".first").removeClass('hilight');
$(".second").css('display','block');
});
if (localStorage.getItem("marking")) {
$(".marked").closest("div").addClass('hilight');
};
Thx.
Localstorage goes by key:value as you know, I tried to keep them separate.
Try this fiddle
http://jsfiddle.net/b4KgV/11/
$(document).on('click', ':checkbox', function () {
var div = $(this).closest("div").attr("id")
if ($(this).is(':checked')) {
$(this).closest("div").addClass('hilight marked');
localStorage.setItem(div, true);
} else {
$(this).closest("div").removeClass('hilight marked');
localStorage.setItem(div, false);
}
});
$(".1st").on('click', function () {
console.log("test")
if (localStorage.getItem("firstDiv") == "true") {
$(".first").closest("div").addClass('hilight');
};
$(".second").css('display', 'none');
$(".second").removeClass('hilight');
$(".first").css('display', 'block');
});

Use the same button to trigger two different JQuery events

I am trying to use the same button to trigger an ajax call to add a database entry if it is clicked and then trigger a different ajax call to remove the entry it is clicked again.
I have tried using toggleClass and although the button class does change and it's appearance changes accordingly the function still thinks it has the old class name.
$(document).ready(function() {
$(".selected").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected selected_btn');
});
$(".selected").on("click", function() {
alert('selected');
});
$(".selected_btn").on("click", function() {
alert('de selected');
});
});
With the present code the alert is always 'selected'.
$(document).ready(function() {
$(".selected_btn").on("click", function() {
$(this).text(function (i, oldText) {
return $.trim(oldText) == 'Use Image' ? 'Selected' : 'Use Image';
});
$(this).toggleClass('selected');
if($(this).hasClass("selected"))
alert("Selected")
else
alert("de-Selected")
});
});
here is a fiddle:
http://fiddle.jshell.net/prollygeek/3LLN2/
Here is a simple and readable example on how to do this:
$(document).ready(function() {
$('.select-img').on('click', function(){
var $el = $(this);
var isSelected = $el.attr('data-selected');
if( isSelected != 'true' ){
firstFn();
$el.html('Use Image').attr('data-selected', true)
}else{
secondFn();
$el.html('Select').attr('data-selected', false)
}
})
var firstFn = function(){
alert('first thing to do');
}
var secondFn = function(){
alert('second thing to do');
}
})
Demo
Use *Class functions:
hasClass
removeClass
addClass
Working code:
$("a").on("click", function() {
if($(this).hasClass("bob")) {
// do delete
alert("delete");
$(this).removeClass("bob");
} else {
// do insert
alert("insert");
$(this).addClass("bob");
}
});
Demo
$(".selected").on("click", function() {
alert('selected');
});
Overrides the event you put on the beginning of the document.ready, I think.
(might not be true, but I think it is)

On hover and on click function / Jquery

I posted a question few hours back but my example was not perfect to understand.
So here it goes.
I have two big boxes. On hover each of the big red box, the small black box should change it's bg color.When you click on each big box then the small box color should change as well.On mouse enter and out it's working fine. But onclick it's not working. I tried with bind/unbind but didn't work.
Jquery:
$('.libg').click(function () {
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
Jsfiddle is http://jsfiddle.net/squidraj/kdZ8J/2/
Please advice. Thanks.
You have two conflicting lines of code:
$('.imagebg').removeClass('active');
$(this).find('.imagebg').addClass('active');
The first line will remove the class, and the second will add the class right back to the element.
http://jsfiddle.net/kdZ8J/4/
$('.libg').click(function () {
var current = $(this).find('.imagebg');
var all = $('.imagebg');
var index = all.index(current);
$('.imagebg').each(function(i) {
if(i != index) {
$(all[i]).removeClass('active');
}
});
if(current.hasClass('active')) {
current.removeClass('active');
} else {
current.addClass('active');
}
}).hover(
function () {
$(this).find('.imagebg').addClass('active');
},
function () {
$(this).find('.imagebg').removeClass('active');
});
I would check each box separately. So I'm going to modify your html code a bit along with some jquery code. http://jsfiddle.net/kdZ8J/15/
Html code:
<ul>
<li class="libg1" id="1">
<div class="imagebg1" id="1a"></div>
</li>
<li class="libg2" id="2">
<div class="imagebg2" id="2a"></div>
</li>
</ul>
Handle click events:
$('#1').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#1a').addClass('active');
//remove the click and active class
$('#2').data('clicked', false);
$('#2a').removeClass('active');
})
$('#2').click(function () {
//add the click and set active class
$(this).data('clicked', true);
$('#2a').addClass('active');
//remove the click and active class
$('#1').data('clicked', false);
$('#1a').removeClass('active');
})
First Rectugular Hovering code:
$('.libg1').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#1a').removeClass('active');
}
else{
$('#1a').addClass('active');
}
}
else{
$('#1a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#1a').addClass('active');
}
else{
$('#1a').removeClass('active');
}
});
Second Rectangular Hoving code:
$('.libg2').hover(function () {
if($(this).data('clicked')) {
//check if active class exists
if($('.active').size()){
$('#2a').removeClass('active');
}
else{
$('#2a').addClass('active');
}
}
else{
$('#2a').addClass('active');
}
},function () {
if($(this).data('clicked')) {
$('#2a').addClass('active');
}
else{
$('#2a').removeClass('active');
}
});

Categories

Resources