strong textI'm trying to Hide/Show a div by clicking on Span element. I'm trying to change the text inside the span to toggle between hide(when element is showing) and show(when element is hidden). i belie I got on a good start but I'm now stuck in getting the jQuery script to work. Any help would be appreciated.
Here is my jsFiddle: http://jsfiddle.net/3AnPX/
HTML
<span class="help_target">Open</span>
<div class="help_content">Content 1</div>
<span class="help_target">Open</span>
<div class="help_content">Content 2</div>
<span class="help_target">Open</span>
<div class="help_content">Content 3</div>
<span class="help_target">Open</span>
<div class="help_content">Content 4</div>
jQuery
$(".help_content").hide();
$(".help_target").click(function () {
$(this).next('.help_content').toggle();
$(this).toggle(function () {
$(this).text('Open');
}, function() {
$(this).text('Close');
});
});
Update:
Trying to implement this on my actual website, but it's not working: http://jsfiddle.net/PzkxA/
You can check the visibility of toggled element to change the text:
if(!$(this).next('.help_content').is(":visible") )
$(this).text('Open');
else
$(this).text('Close');
Update:
$("span.hideshow").click(function () {
$(this).closest('.profilestats-courseblock').find('.profilestats-course-badges').toggle();
$(this).text($(this).text() == 'Close' ? 'Open' : 'Close');
});
Working Demo
Bit late but another way here :) demo http://jsfiddle.net/q76dk/
So probably all you want is to cahgne the text nsince the .help_content is outside span
Hope this fits your needs. :)
code
$(".help_content").hide();
$(".help_target").click(function () {
$(this).next('.help_content').toggle();
$(this).text($(this).text() == 'Close' ? 'Open' : 'Close');
});
Related
I am trying to implement onClick function for a div which is getting generated depending on some validations while submitting the page. I am trying to implement the same from an external js file.
HTML design is something like :
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
//dynamically generated
<div>
---
----
</div>
</div>
Now, I am trying to implement the onClick function like below :
$('img.popUpClose.popUpCloseQview').each(function (index) {
$(this).on("click", function (e) {
//DO something
});
});
But the issue is, this $('img.popUpClose.popUpCloseQview') element is not there in the code on the first time. After the submit button click valiations are happening and depending on the condition this pop up message is coming up and this function is not working anytime.
Tried some other options too. But none of these are working.
Please advise.
Thanks,
Aniket
If you are dynamically generating the div in jquery, you can add the click event then. For example:
var div = $("<div>");
div.click(function(){//dostuff});
$("#QViewInfo").append(div);
You could attach the click event to all the div's of element #QViewInfo using event delegation on() like :
$('#QViewInfo').on('click', 'div', function(){
//DO something
})
NOTE : No need for using each() loop.
Hope this helps.
$('#QViewInfo').append('<div>Div 3</div>');
$('#QViewInfo').on('click', 'div', function(){
console.log($(this).text());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo" style="top: 207px; left: 531.5px;">
<div>Div 1</div>
<div>Div 2</div>
</div>
Working snippet with comment code :
var img = '<img src="/Images/...." onclick="alert(\'QView.close();\')" alt="Close Quick View" class="popUpClose popUpCloseQview">';
$('.oosInfo').append(img);
$('#QViewInfo').on('click', 'img.popUpClose.popUpCloseQview', function(){
alert("A");
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QViewInfo">
<div class="oosInfo">
<div class="alertImgDiv">
<span class="oosAlertImg"></span>
</div>
</div>
</div>
I have many snippets with a "read more" link, and I'm looking for a way to have the same selectors for all the snippets. I thought that jQuery's next could work:
<script>
$(document).ready(function () {
$(".readmore").click(function () {
$(".readmore").next().slideToggle("slow", function () {
$(window).scrollTop($(this).offset().top);
});
});
});
</script>
Visible text 1<a class="readmore">Read More 1</a><div class="more">Text to appear 1</div>
Visible text 2<a class="readmore">Read More 2</a><div class="more">Text to appear 2</div>
Visible text 3<a class="readmore">Read More 3</a><div class="more">Text to appear 3</div>
<style>.more {display:none}</style>
Unfortunately, text for all snippets appears when clicking on one "read more" link, instead of just the next element. What's wrong with the code above?
Here's a JsFiddle.
You should change
$(".readmore").click(function () {
$(".readmore").next()...
to
$(".readmore").click(function () {
$(this).next()...
so the next() selector in the click() event function is only applied to the currently clicked element instead of all elements with the class readmore at the same time.
I have a series of text links that toggle visibility of a div element. The text links are styled to look like buttons and the text is being changed when the div is visible or invisible.
The problem is that when the first link is pressed, it toggles the visibility of it's own div plus all the other hidden divs and what is needed is that each link toggles the visibility of it's own div.
My question is what is the best way to solve this problem using only one function. Below is my code. Thanks!
The code can be also tested here:
http://jsfiddle.net/Bradg/eBfxB/
HTML:
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content One</h2>
</div>
<div>
See all
</div>
<div class="slidingDiv" style="display: block;">
<h2>Content Two</h2>
</div>
JS:
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').toggle(function(){
$(".slidingDiv").slideDown(
function(){
$("#plus").text("Hide all")
}
);
},function(){
$(".slidingDiv").slideUp(
function(){
$("#plus").text("See all")
}
);
});
});
CSS:
.show_hide {
display: none;
}
The version of toggle() that accepts two callbacks have been deprecated and removed, so you'll have to use click instead and do something like this
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').on('click', function(e){
e.preventDefault();
var self = this,
sliding = $(this).closest('div').next('.slidingDiv').slideToggle(function(){
$(self).text(function(_,txt) {
return txt == "Hide all" ? "See all" : "Hide all";
});
});
});
});
FIDDLE
Note the use of the classes only (ID's must be unique) and the this keyword
So I created the following jquery that shows/hides a div.
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").hide();
});
$("#show").click(function(){
$("#me").show();
});
});
This is some text
Hide
Show
http://jsfiddle.net/6DTeq/7/
It works fine. But I need to make it work so that instead of having a separate show and hide text, I need to toggle show and hide.
But main problem is I dont want to have the text in the javascript file for internationalization purposes.
It's ok if the text resides in the html. Can someone help me with this?
Html :
<div id="me"> This is some text</div>
<div id="toggle">toggle</div>
Js:
$("#toggle").click(function(){
$("#me").toggle();
});
Demo -----> http://jsfiddle.net/6DTeq/8/
Updated fiddle -----> http://jsfiddle.net/6DTeq/13/
Try this
$(document).ready(function(){
$("#me").hide();
$("#hide").click(function(){
$("#me").toggle();
$(this).text(function(i, val) {
return val === 'Show' ? 'Hide' : 'Show';
});
});
});
Check Fiddle
<div id="me" style="display:none;"> This is some text</div>
<div id="clickContainer">
<div id="hide" style="display:none;">Hide</div>
<div id="show">Show</div>
</div>
$(document).ready(function(){
$("#clickContainer").click(function(){
$("#me").toggle();
$("#hide").toggle();
$("#show").toggle();
});
})
Try that:
http://jsfiddle.net/6DTeq/10/
$(document).ready(function () {
$("#toggle").click(function () {
$("#me").toggle();
$(this).text(function(){return $('#me:visible').length?'Hide':'Show'});
}).triggerHandler('click');
});
I'm new with jQuery and fairly new to JS (a little knowledge) and I'm wanting to create a jQuery code.
Firstly, here is my HTML code:
<div id="user-controls">
<div class="choice" id="choice-all" onclick="showAll();">All</div>
<div class="choice" id="choice-asus" onclick="justASUS();">ASUS</div>
<div class="choice" id="choice-htc" onclick="justHTC();">HTC</div>
</div>
<div id="devices">
<div class="android asus">Nexus 7</div>
<div class="android htc">One S</div>
<div class="android htc">One X+</div>
<div class="android asus">Transformer Prime</div>
<div class="winph htc">Windows Phone 8X</div>
</div>
I'm wanting a jQuery code that would do the following:
If I click on the #choice-asus DIV, then all DIVs with the class .htc would be set to display="none"
If I click on the #choice-htc DIV, then all DIVs with the class .asus would be set to display="none"
If I click on the #choice-all DIV, then all DIVs would be set to display="inline-block" (this is also the default setting when the page first loads)
I've already tried the following code, but it doesn't do anything.
$(document).ready(function(){
$("#choice-htc").click(function(){
$(".htc").hide();
})
});
Thank you for any help,
Dylan.
So many choices :) http://jsfiddle.net/9RtUE/
$(function(){
$("#user-controls").on('click','div',function(){
var classToShow = this.id.split('-')[1],
filter = classToShow === "all" ? 'div': '.' + classToShow;
$("#devices").children().show().not(filter).hide();
});
});
try using jquery
Demo
$('#choice-all').click(function(){
$('.htc, .asus').show();
});
$('#choice-asus').click(function(){
$('.asus').show();
$('.htc').hide();
});
$('#choice-htc').click(function(){
$('.htc').show();
$('.asus').hide();
});
Demo here
$(document).ready(function(){
$(".choice").click(function(){
$(".android,.winph").hide();
if($(this).attr("id")=="choice-all"){
$(".android,.winph").show();
}else if($(this).attr("id")=="choice-asus"){
$(".asus").show();
}else if($(this).attr("id")=="choice-htc"){
$(".htc").show();
}
});
});
to keep it easy and clean you should use a solution such as this one
$(function(){
$('#choice-asus').on('click', function(){
$('#devices > div:not(.asus)').hide();
});
});
it basically says, if you click on #choice-asus, hide all divs in #devices which have no class asus.
you can extend / modify this for your own needs.
besides, its recommend to use jquerys .on() method instead click/bind or what ever handler you'd apply.
$(document).ready(function(){
if($('div').attr('class')=='X')
{
$('div').not($(this)).css('display','none');
}
});
You can try the following code-
function showAll(){
$("#devices div").show();
}
function justASUS(){
$("#devices div").hide();
$("#devices .asus").show();
}
function justHTC(){
$("#devices div").hide();
$("#devices .htc").show();
}
demo here.