I'm trying to change the text of a span when it is clicked depending on the current value it has.
If it is Open - then set value to Close.
If it is Close - then set value to Open.
$('.details_btn').click(function(){
if($(this).text('Open'){
$(this).html('Close');
}else{
$(this).html('Open');
}
});
I've got a fiddle of what I've been doing here:
http://jsfiddle.net/javacadabra/ch0u1xws/
However, it doesn't seem to ever go back from Close to Open and I'm not sure why. Could someone shed some light on this?
Many thanks
Your if statement is a bit wrong. The .text() takes a parameter to set the text, simply call it parameterless to return the current text. So:
if($(this).text('Open')){
Should be:
if($(this).text() == 'Open'){
The text() function either retrieves or set's the inner text of an element. So to test it's current value you should use:
if($(this).text() == "Open")
Instead of
if($(this).text('Open'))
Update to your fiddle: http://jsfiddle.net/ch0u1xws/2/
$(document).ready(function(){
$('.details_btn').click(function(){
if($(this).text() == 'Open'){
$(this).html('Close');
}else{
$(this).html('Open');
}
});
});
To get the current value, don't provide any parameters to the .text() function, as others have mentioned. But an alternative solution is to pass a function in to manipulate the current value, like this:
$(document).ready(function(){
$('.details_btn').click(function() {
$(this).text(function(i, text) {
return text == 'Open' ? 'Close' : 'Open';
});
});
});
$(document).ready(function(){
$('.details_btn').click(function() {
$(this).text(function(i, text) {
return text == 'Open' ? 'Close' : 'Open';
});
});
});
.details_btn{
background-color: red;
color:white;
padding:20px;
text-transform:uppercase;
font-family:calibri;
font-weight:bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<span class="details_btn">Open</span>
Related
I need that when my div is empty, remove if not, run the appendChild code. I'm not getting the logic right, I think
$(window).on("load", function() {
if ('#leftmenu:empty') {
$('#leftmenu:empty').remove();
} else {
document.querySelector('.iframe-output').appendChild(
document.querySelector('.paddingbox iframe')
}
});
$(window).on("load", function() {
if ($('#leftmenu').html().length == 0) {
$('#leftmenu').remove();
} else {
//do whatever
}
});
I don't know what you want. Please refer enter link description here to find how to check div is empty. Then if not you can add the code you want. Currently, this code is the wrong syntax. You need to fix it like
document.querySelector('.iframe-output').appendChild(
document.querySelector('.paddingbox iframe'));
$( "p:empty" )
//.text( "Was empty!" )
//.css( "margin", "0" )
.remove();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>Has text</p>
<p></p>
<p></p>
<p>Has text</p>
Please Try this
$(document).ready(function() {
if ($('#leftmenu').length==0)
{
$('#leftmenu').remove();
} else {
document.querySelector('.iframe-output').appendChild(
document.querySelector('.paddingbox iframe')
}
});
You've got a couple of errors with your code - you're if statement is only checking a string and not actually if the empty div exists and you have a syntax error on your append (and I'm not sure you can append directly to a collection like that)
Try this (comments to what I have changed)
$(window).on("load", function() {
var $emptyDiv = $('#leftmenu:empty'); // get empty div
if ($emptyDiv.length) { // see if empty div exists
$emptyDiv.remove(); // remove empty div
} else {
$'.iframe-output').append($('.paddingbox iframe')); // you may as well use jquery append as you are using jquery
}
});
:
I'm new to javascript and jquery, and I have this little bit of code to swap one bit of text for another that works perfectly except for the very first time you click the div.
Any ideas? I'm probably just calling on it wrong but not sure how to proceed
Here's a fiddle: http://jsfiddle.net/pauljackson/4r8v6/
js:
$(document).ready(function() {
$("#showemail").click(function() {
var $self = $(this);
if ($self.text() == "Contact")
$self.text("someguy#theinternet.com");
else
$self.text("Contact");
});
});
html:
<div id="showemail">
Contact
</div>
css:
#showemail:hover {
cursor:pointer;
}
Thanks!
Your text has some whitespace originally, trim it:
if ($self.text().trim() == "Contact")
The reason it works the second click is because your else condition sets the text to "Contact" without whitespace - then the next time you click your condition evaluates to true and all is well
Fiddle: http://jsfiddle.net/4r8v6/3/
Heres an update. Note the trim. It seems there is some additional text in the #showemail div that needs to be trimmed.
$(document).ready(function() {
$("#showemail").click(function() {
var $self = $(this);
console.log($self.text());
if ($self.text().trim() == "Contact") {
$self.text("someguy#theinternet.com");
}
else {
$self.text("Contact");
}
});
});
http://jsfiddle.net/qVfy7/
HTML
<div id='button'></div>
<div id="mydiv">ko</div>
JS
$('#button').click(function () {
$('#mydiv').text('ok');
});
CSS
#button{
width:100px;
height:100px;
background-color:red;
}
On clicking the button, mydiv's text changes. What I want to do, is clicking again on it to change the text back to ko, and so on, alternating between the two values. Is there a way to do that?
Sure, just check what the text is, and return the other value to the text() method
$('#button').click(function () {
$('#mydiv').text(function(_, txt) {
return txt == 'ok' ? 'ko' : 'ok';
});
});
FIDDLE
There are multiple ways, but one them is, make an if-else:
$('#button').click(function () {
if($('#mydiv').text()=="ko")
$('#mydiv').text('ok');
else
$('#mydiv').text('ko');
});
DEMO
I want to do something like this:
$(document).ready(function(){
if($('.undermenu').css('display','block')){
$('#menu').click(function(){
$('.undermenu').css('display','none');
});
}
else{
$('#menu').click(function(){
$('.undermenu').css('display','block');
});
}
});
This code does not work, but is there any Jquery "effect" or whatever that I can use to hide/un-hide.
For example is there and way to check whether or not display is set to none or block?
Thanks.
Just use toggle():
$('#menu').click(function() {
$('.undermenu').toggle();
});
Though the reason your if($('.undermenu').css('display','block')) didn't work is because you set the display property of the element(s) to block, rather than getting the display property and testing it, which would be:
if ($('.undermenu').css('display') =='block')
If you really want to use an if to test the current display, before modifying the presentation, you'd have to do it inside of the click handler (otherwise it will only run once, on DOMReady, rather than every time):
$('#menu').click(function(){
if ($('.undermenu').css('display') == 'block') {
$('.undermenu').hide();
}
else {
$('.undermenu').show();
}
});
Or, if you want to risk the wrath of your colleagues, you can jazz that up a little:
$('#menu').click(function(){
var undermenu = $('.undermenu');
undermenu[undermenu.css('display') == 'block' ? 'hide' : 'show']();
});
References:
css().
toggle().
You use a setter on your condition :
// This line update .undermenu to display it and return true (return $('.undermenu'), so true)
if($('.undermenu').css('display','block')){
But you must get the value, and test
if($('.undermenu').css('display') === 'block'){
And you code conception is bad. If you do that, you test on document are ready if the .undermenu are displayed or not, and you put a function to the click trigger (to display or to hide..) but ! when your .undermenu was change, you already have the same trigger (to display or hide, and he never change)..
So you need to put your trigger for each click and test the value (displayed or not) on the trigger :
$(document).ready(function(){
$('#menu').click(function(){
if($('.undermenu').css('display') === 'block'){
$('.undermenu').hide();
}
else {
$('.undermenu').show();
}
});
});
On jquery exists:
$("#element_id").show();
$("#element_id").hide();
also you can use:
$("#element_id").fadeIn();
$("#element_id").fadeOut();
This show and hide elements with fade effects.
You can query if the element is hidden:
if($("#element_id").is(":hidden")){
$("#element_id").show():
}
else{
$("#element_id").hide();
}
What you're looking for is .toggle()
$("div").click(function () {
$("img").toggle("slow", function () {
// Animation complete.
});
});
Here is a fiddle: http://jsfiddle.net/FQj89/
You can put the if statement in the function so you don't repeat yourself. You can probably also use toggle(); type stuff depending on what you are doing. ---
$('#menu').click(function(){
if ( $('.undermenu').is(':visible') ) {
$('.undermenu').hide();
else {
$('.undermenu').show();
}
});
This is a good way too, depending on what you are doing though, one may be better than the other.
if ( $('.undermenu').css('display') === 'block' ) { // do something }
I want to make a script that is changing toggle link text depending on others element visibility.
So while #form is visible I want the #form-container a text to be "Hide...", and while it's hidden I want the text to be "Show...".
I've tried this line - if($('#form').is(":visible")){ another way: if($('#form').is(":visible") == "true"){ - but it also doesn't work.
What's wrong? How to change text every time another item is toggled?
$('.toggle').click(
function()
{
$('#form').slideToggle();
if($('#form').is(":visible")){
$('#form-container a').text("Hide form container");
}
else {
$('#form-container a').text("Show form container");
}
});
Thanks.
It'll always be visible while animating, you can check the visibility in the .slideToggle() callback so it checks when it finishes animating, like this:
$('.toggle').click(function() {
$('#form').slideToggle(function() {
$('#form-container a').text(
$(this).is(':visible') ? "Hide form container" : "Show form container"
);
});
});
You can use toggle on the form element.
$("#form").slideToggle(
function () {
//Hide
},
function () {
//Show
}
);
source: http://api.jquery.com/toggle/