Change link text while div expands - javascript

I have a div that expands once you click on a link; my issue, is I want to change the text while the div expands so that the link says "hide form". Can somebody please help me? I'm still new to jQuery..
The link to the page is here: http://biggz.co
Here's the jQuery I'm currently using:
$(document).ready(function()
{
jQuery('a.contactForm').click(function() {
jQuery('#contactForm').slideToggle('slow', function() {
// Animation complete.
});
});
});

jQuery('#contactForm').slideToggle('slow', function () {
var txt = ($(this).css('display') == 'none') ? 'contact us directly':'Hide Form';
$('.contactForm').text(txt);
});

$(document).ready(function()
{
jQuery('a.contactForm').click(function() {
jQuery('#contactForm').slideToggle('slow');
$(this).text($(this).text() == 'Show' ? 'Hide' : 'Show');
});
});

Make use of text(). Like
jQuery('a.contactForm').text('Hide Form');
So your code can be
jQuery('a.contactForm').click(function() {
var text= $(this).text();
if (text == 'Show Form')
$(this).text('Hide From');
else
$(this).text('Show Form');
jQuery('#contactForm').slideToggle('slow', function() {
// Animation complete.
});
});

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');
});
});

jquery change button text from save to edit 2 ways

i newbie in programming and wanna ask how to change button 2 way.
<button type="button" id="button">Save</button>
<script>
$(document).ready(function() {
$('#button').click(function(){
$('#button').text("Edit");
});
});
initial when i click i turn to "Edit" then how to click back to "Save" when clicking.
thank you
Write a small toggle function:
$('#button').on('click', function() {
$(this).text(function(_, value) {
return value == 'Save' ? 'Edit' : 'Save';
});
});
$(document).ready(function() {
var editing = false;
$('#button').click(function(){
editing = !editing;
if (editing) {
$('#button').text("Edit");
} else {
$('#button').text("Save");
}
});
});
check this:
$(document).ready(function() {
$('#button').click(function(){
if( $('#button').text()=='Save')
{
$('#button').text("Edit");
}
else
{
$('#button').text("Save");
}
});
});
http://jsfiddle.net/2m5q7/
A simple ternary operator will do it:
$('#button').click(function(){
$(this).text($(this).text() == 'Save' ? 'Edit' : 'Save');
});
Or you can pass a function to .text():
Demo
$('#button').click(function(){
$(this).text(function(_, val){
return val == 'Save' ? 'Edit' : 'Save';
});
});

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)

Toggle show/hidden with jquery

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";
}
}

Categories

Resources