When using slideToggle, how to change the Text close/show?
I did a simple one, but cannot get the text change back.
Here is what I did:
$(document).ready(function(){
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
});
$('.open2').click(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
});
});
body{
font-size:20px;
}
#box{
border:2px solid #000;
width:500px;
min-height:300px;
}
.open,.open2 {
width:450px;
height:50px;
background:blue;
margin:5px auto 0 auto;
color:#fff;
}
.showpanel,.showpanel2{
width:450px;
height:300px;
margin:0 auto 10px auto;
background:red;
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="box">
<div class="open">Show</div>
<div class="showpanel">This is content</div>
<div class="open2">Show</div>
<div class="showpanel2">This is content</div>
</div>
http://jsfiddle.net/9EFNK/
You can use the is() assertion method to check whether the panel is open or closed in the animation's callback and set the text accordingly - http://jsfiddle.net/9EFNK/7/
$('.open').click(function(){
var link = $(this);
$('.showpanel').slideToggle('slow', function() {
if ($(this).is(':visible')) {
link.text('close');
} else {
link.text('open');
}
});
});
Just add a simple if statement to test the text like so
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
if($(this).text() == 'close'){
$(this).text('Show');
} else {
$(this).text('close');
}
});
Like this DEMO
Not the prettiest of methods, but it does the job in a single statement.
$(this).text(($(this).text() == 'Close') ? 'Show' : 'Close');
Use .toggle()
Here is Working Demo
$('.open').click(function(){
$('.showpanel').slideToggle('slow');
}).toggle(function() {
$(this).text('Hide');
}, function() {
$(this).text('Show');
});
check this may be user question is solve Fiddle
Here's an updated version http://jsfiddle.net/9EFNK/1/
You can simply toggle a class on close/open, perform a check for that class and change the contained text accordingly
if( $(this).hasClass('active') )
$(this).text('open');
else
$(this).text('Show');
$(this).toggleClass('active');
try this demo
$(document).ready(function(){
$('.open').toggle(function(){
$('.showpanel').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel').slideToggle('slow');
$(this).text('Show');
});
$('.open2').toggle(function(){
$('.showpanel2').slideToggle('slow');
$(this).text('close');
}, function(){
$('.showpanel2').slideToggle('slow');
$(this).text('Show');
});
});
Use this
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
Here is how you use it
jQuery.fn.toggleText = function() {
var altText = this.data("alt-text");
if (altText) {
this.data("alt-text", this.html());
this.html(altText);
}
};
$('[data-toggle="offcanvas"]').click(function () {
$(this).toggleText();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<button data-toggle="offcanvas" data-alt-text="Close">Open</button>
You can even use html provided it's html encoded properly
Related
The below code is working fine, but i want merge checked and click functions in single function. Is it possible?
$(function () {
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
$(function () {
$("#enablepromo0").click(function () {
if ($(this).is(":checked")) {
$("#PromoPanel").show(300);
} else {
$("#PromoPanel").hide(300);
}
});
});
Use the change event and trigger it, it can then detect the current state of the checkbox. I altered the code to toggle a class instead to avoid a "flash" initially.
$(function() {
$("#enablepromo0").on('change', function() {
let isChecked = !this.checked;
$("#PromoPanel").toggleClass("hidden", isChecked, {
duration: 300
});
}).trigger('change');
});
.panel {
border: solid lime 1px;
background: #ddffdd;
}
.hidden {
display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
Check to show: <input type="checkbox" id='enablepromo0' />
<div class="container">
<div id="PromoPanel" class="panel hidden">
<h2>Hi There</h2>Get stoked</div>
</div>
both function do the same job so i changed something to show an alert:
$(function () {
$("#enablepromo0").click(function () {
alert("dddddd")
if($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<input type="checkbox" id='enablepromo0'/>
<div id="PromoPanel" style="border: 1px solid red; width:50px; heigth:50px; display:none;">uuu</div>
Move the code to its own function and call as required:
function showHide() {
if ($("#enablepromo0").is(":checked"))
$("#PromoPanel").show(300);
else
$("#PromoPanel").hide(300);
}
$(function () {
showHide();
$("#enablepromo0").click(function () {
showHide();
});
});
i'm creating a navbar. when i click one of the options , that option becomes active but when i click on the other option the previous option which was active remains there
SEE MY FIDDLE EXAMPLE : https://jsfiddle.net/bpmbu3th/
I just want to make the item active which is clicked
MY HTML
<p id="parent1">i'm the parent</p>
<p id="child1">i'm the first child</p>
<p id="parent2">i'm the 2nd parent</p>
<p id="child2">i'm the second children</p>
MY CSS
#parent1{
background-color:#000;
color:#fff;
}
#child1{
display:none;
background-color:red;
color:#fff;
}
#parent2{
background-color:#000;
color:#fff;
}
#child2{
display:none;
background-color:red;
color:#fff;
}
MY JQUERY
(function(){
var object = {
dropdown1:$('#child1'),
dropdown2:$('#child2'),
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
You should use common class to get rid of repetitive code.
Here's an example
$(function() {
$('.parent').on('click', function() {
var child = $(this).next('.child'); //Finds the next child
//fade out others then handle current child
$('.child').not(child).fadeOut(function() {
child.fadeToggle();
})
});
});
.parent {
background-color:#000;
color:#fff;
}
.child {
display:none;
background-color:red;
color:#fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="parent">i'm the parent</p>
<p class="child">i'm the first child</p>
<p class="parent">i'm the 2nd parent</p>
<p class="child">i'm the second children</p>
You just have to add two lines of code in your javascript, here is the edited snippet -
dropdown1parent: function(){
if(object.dropdown1.is(':hidden')){
object.dropdown1.fadeIn();
object.dropdown2.fadeOut(); //this line
}
else{
object.dropdown1.fadeOut();
}
},
dropdown2parent: function(){
if(object.dropdown2.is(':hidden')){
object.dropdown1.fadeOut(); //this line
object.dropdown2.fadeIn();
}
else
{
object.dropdown2.fadeOut();
}
}
Is that you wanted?
You need to fade out the other one:
(function () {
var object = {
dropdown1: $('#child1'),
dropdown2: $('#child2'),
dropdown1parent: function () {
if (object.dropdown1.is(':hidden')) {
object.dropdown1.fadeIn();
object.dropdown2.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
},
dropdown2parent: function () {
if (object.dropdown2.is(':hidden')) {
object.dropdown2.fadeIn();
object.dropdown1.fadeOut();
} else {
object.dropdown1.fadeOut();
object.dropdown2.fadeOut();
}
}
};
$('#parent1').on('click', object.dropdown1parent);
$('#parent2').on('click', object.dropdown2parent);
})();
https://jsfiddle.net/ghorg12110/bpmbu3th/1/
You should think about creating a function to manage that, it will become a nightmare if you use a lot of "dropdown".
$(document).ready(function() {
$('.tests').click(function() {
$(this).css('background-color', '#FFBF38');
});
});
This code works ok, but when I click other button (.tests), I want to back to color was previously.
how to do it? Thanks!
$(document).ready(function() {
$('.tests').click(function() {
$(".tests").css('background-color', "YOUR PREVIOUS COLOR");
$(this).css('background-color', '#FFBF38');
});
});
var startColor = "yourStartColor";
$(document).ready(function()
{
$('.tests').click(function()
{
if($(this).css('background-color') == "#FFBF38")
$(this).css('background-color', startColor);
else
$(this).css('background-color', "#FFBF38");
});
});
you need to use toggleClass("");
HTML
<div class="place"></div>
CSS
.place {
width: 50px;
height: 50px;
background-color: #336699;
}
.green{
background-color: black;
}
Script
$(".place").click(function () {
$(this).toggleClass("green");
});
Demo
Try this,
$('.tests').click(function() {
$('.tests').css('background-color', 'your_old_color');
$(this).css('background-color', '#FFBF38');
});
This question already has answers here:
Use jQuery to hide a DIV when the user clicks outside of it
(40 answers)
Closed 9 years ago.
Now I am closing the alert box when I clicked on the 'x' but I want to close the alertbox when I click outside of it.
Please see my code here :http://jsfiddle.net/Ur5Xn/
How to close alertbox clicking outside of it?
The jQuery:
$(document).ready(function(){
function showAlertBox(){
$("#alert").css("display","inherit");
$("#content").addClass("back");
}
function removeAlertBox(){
$("#alert").css("display","none");
$("#content").removeClass("back");
}
$("#alertClose").click(function(){
removeAlertBox();
});
$("#alertShow").click(function(){
showAlertBox();
});
});
try this code
$(document).ready(function(){
function showAlertBox(){
$("#alert").css("display","inherit");
$("#content").addClass("back");
}
function removeAlertBox(){
$("#alert").css("display","none");
$("#content").removeClass("back");
}
$("#alertClose").click(function(e){
e.stopPropagation();
removeAlertBox();
});
$("#alertShow").click(function(e){
e.stopPropagation();
showAlertBox();
});
$(document).click(function(e){
removeAlertBox();
});
});
This should work: http://jsfiddle.net/LagBE/
$(document).on('mouseup', function (e)
{
var alert = $('#alert');
// Make sure neither the alert,
// nor anything inside of it was clicked
if (!alert.is(e.target) && alert.has(e.target).length === 0)
{
removeAlertBox();
}
});
jsfiddle here
html:
<div id="alert">
<div id='transBG'></div>
<div id="alertbox">I am an alert box <span id="alertClose">X</span></div>
</div>
<div id="content">
Content <span id="alertShow">Show Alert Box</span>
</div>
css:
#alert {
display:none;
}
#alertbox{
border:1px solid #000;
position:fixed;
top: 50%;
left: 50%;
margin-top: -50px;
margin-left: -100px;
height:100px;
width:200px;
z-index:9;
}
#transBG{
position:fixed;
top:0;
left:0;
width:100%;
height:100%;
z-index:8;
}
.back{
opacity:0.5;
}
javascript:
$(document).ready(function(){
function showAlertBox(){
$("#alert").css("display","inherit");
$("#content").addClass("back");
}
function removeAlertBox(){
$("#alert").css("display","none");
$("#content").removeClass("back");
}
$("#transBG").click(function(){
removeAlertBox();
});
$("#alertClose").click(function(){
removeAlertBox();
});
$("#alertShow").click(function(){
showAlertBox();
});
});
Here is the update working code:
$(document).ready(function () {
function showAlertBox() {
$("#alert").css("display", "inherit");
$("#content").addClass("back");
return false;
}
function removeAlertBox() {
$("#alert").css("display", "none");
$("#content").removeClass("back");
return false;
}
$("#alertClose").click(removeAlertBox);
$("#alertShow").click(showAlertBox);
$('#alert').click(false);
$(document).click(removeAlertBox);
});
See http://jsfiddle.net/Ur5Xn/34/
I have a problem:
When I click on my '.glass' div it opens multiple '.permalinks' divs, but I just want to open the one I click.
This is my code:
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$('.permalinks').slideToggle(function() {
});
});
});
</script>
This is the CSS:
.permalinks {
display:none;
position:absolute;top:0;
width:100%;
height:100%;
background:rgba(0,0,0,.7);
}
.reblog, .link, .like {
display:inline-block;
margin:2%;
margin-top:45%;
padding:7% 7% 4% 7%;
}
.reblog, .link, .like {
width:10%;
}
.reblog {
background:#317FD4;
}
.link {
background:#38C264;
}
.like {
background:#ED4A4A;
}
.glass {
position:absolute;
top:0;
left:0;
background:#f3f3f3;
}
And this the html:
<div class="permalinks">
<div class="reblog"><center><img src=""></center></div>
<div class="link"><center><img src=""></center></div>
<div class="like"><center><img src=""></center></div>
</div>
<img class="glass" src="" width="5%">
If you could tell me what I've done wrong, please.
assign the click handler to .permalinks and use $(this).slideToggle()
$(window).ready(function() {
$('.permalinks').click(function() {
$(this).slideToggle();
});
});
http://jsfiddle.net/yRFSV/
If .permalinks is a child of .glass, then it's easy:
$(window).ready(function() {
$('.glass').click(function() {
$(this).find('.permalinks').slideToggle(function() {
});
});
});
If .permalinks is a child of .glass, then you can select it directly upon click.
$('.glass').on('click', function() {
$(this).find('.permalinks').slideToggle();
});
you probably want
<script type="text/javascript">
$(window).ready(function() {
$('.glass').click(function() {
$(this).children('.permalinks').slideToggle(function() {
});
});
});
</script>
Two options:
.permalinks is after .glass in the DOM tree
Use $(this).next('.permalinks').slideToggle(function() {
.permalinks is before .glass in the DOM tree
Use $(this).prev('.permalinks').slideToggle(function() {