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');
});
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');
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.