Hi,
Why my code do not switch button to hide?
I just starting with jquery
$(function() {
$( "#clickme" ).click(function() {
$( "#book" ).toggle( "slow", function() {
});
});
});
$(function() {
$("#book").each(function() {
if( $("#book").css("display") == 'none' )
{
$('#clickme').html('show');
}
else if( $("#book").css("display") == 'inline-block' )
{
$('#clickme').html('Hide');
}
});
});
<div id="clickme"></div>
<span id="book" style="display:none">
Testowy koment
</span>
Because the code is just wrong and doesn't make any sense. You can simply change it in the toggle function:
$(document).ready(function() {
$("#clickme").click(function() {
$("#book").toggle("slow", function() {
if($(this).is(":visible"))
$("#clickme").html(lang.hide);
else
$("#clickme").html(lang.show);
});
});
});
thanks !
I have one more question
now my code look like that
<script type="text/javascript">
$(document).ready(function() {
$("#clickme"+sid).html(lang.show);
$("#clickme"+sid).click(function(e) {
e.preventDefault();
if (!$("#book"+sid).is(':animated'))
{
$("#book"+sid).slideToggle("slow", function() {
if($(this).is(":visible"))
$("#clickme"+sid).html(lang.hide);
else
$("#clickme"+sid).html(lang.show);
});
}
});
});
</script>
<script type="text/javascript">
<!--
lang.show = "Pokaż komentarze";
lang.hide = "Ukryj komentarze";
var sid = "{$tpl['sid']}";
// -->
</script>
<div id="clickme{$tpl['sid']}"></div>
<div id="book{$tpl['sid']}" style="display:none">
Test
</div
what is weong i this code?
hmmm
latest version of code, the show, the show hide option wrk but show only on last tr
<script type="text/javascript">
$(function() {
$(document).ready(function() {
$("#clickme"+sid).html(lang.show);
$("#clickme"+sid).click(function(e) {
e.preventDefault();
if (!$("#book"+sid).is(':animated'))
{
$("#book"+sid).slideToggle("slow", function() {
if($(this).is(":visible"))
$("#clickme"+sid).html(lang.hide);
else
$("#clickme"+sid).html(lang.show);
});
}
});
});
});
</script>
<script type="text/javascript">
<!--
lang.show = "Pokaż komentarze";
lang.hide = "Ukryj komentarze";
var sid = "{$tpl['sid']}";
// -->
</script>
<tr><td class="{$bgcolor}">
<table width="100%" border="0" cellpadding="4" cellspacing="1">
<tr>
<td width="10%" valign="top">
{$tpl['avatar']}
</td>
<td width="90%" valign="top">
{$tpl['profilelink']}<span style="float: right;widthmargin-right: 5px;">{$tpl['date']}</span><br />
{$tpl['statustext']}
<div id="clickme{$tpl['sid']}"></div>
<div id="book{$tpl['sid']}" style="display:none">
Test
</div
</td></tr></table></td></tr>
Well, adding two scripts for each row is not really good. You could pass the sid as a JS function parameter. and then call it in onclick.
Really the JS only has to be run once rather than for each one I feel like. Also this would be a lot easier to answer if you were a little more clear on what you're trying to do. ^^
<script type="text/javascript">
jQuery(document).ready(function($) {
var button, buttonShow, buttonHide;
buttonHide = "Pokaż komentarze";
buttonShow = "Ukryj komentarze";
button = $(".clickme");
button.click(function(e) {
e.preventDefault();
if (!$(this).next().is(':animated')) {
$(this).next().slideToggle("slow", function() {
if($(this).is(":visible")) {
$(this).prev().html(buttonHide);
} else {
$(this).prev().html(buttonShow);
}
});
}
});
});
</script>
<div class="clickme click_{$tpl['sid']}"></div>
<div class="book book_{$tpl['sid']}" style="display:none">
Test
</div>
But again I don't know the ultimate purpose of this so it could be done differently depending. Also I didn't test this so it might not work.
(2015-01-06, 07:57 PM)Eric J. Wrote: [ -> ]Really the JS only has to be run once rather than for each one I feel like. Also this would be a lot easier to answer if you were a little more clear on what you're trying to do. ^^
<script type="text/javascript">
jQuery(document).ready(function($) {
var button, buttonShow, buttonHide;
buttonHide = "Pokaż komentarze";
buttonShow = "Ukryj komentarze";
button = $(".clickme");
button.click(function(e) {
e.preventDefault();
if (!$(this).next().is(':animated')) {
$(this).next().slideToggle("slow", function() {
if($(this).is(":visible")) {
$(this).prev().html(buttonHide);
} else {
$(this).prev().html(buttonShow);
}
});
}
});
});
</script>
<div class="clickme click_{$tpl['sid']}"></div>
<div class="book book_{$tpl['sid']}" style="display:none">
Test
</div>
But again I don't know the ultimate purpose of this so it could be done differently depending. Also I didn't test this so it might not work.
thanks but your code dont work
I try do something like this for all rows
https://www.youtube.com/watch?v=4ZP83A5Q...e=youtu.be
how you can see now work only for last
(2015-01-06, 09:15 PM)Supryk Wrote: [ -> ] (2015-01-06, 07:57 PM)Eric J. Wrote: [ -> ]Really the JS only has to be run once rather than for each one I feel like. Also this would be a lot easier to answer if you were a little more clear on what you're trying to do. ^^
<script type="text/javascript">
jQuery(document).ready(function($) {
var button, buttonShow, buttonHide;
buttonHide = "Pokaż komentarze";
buttonShow = "Ukryj komentarze";
button = $(".clickme");
button.click(function(e) {
e.preventDefault();
if (!$(this).next().is(':animated')) {
$(this).next().slideToggle("slow", function() {
if($(this).is(":visible")) {
$(this).prev().html(buttonHide);
} else {
$(this).prev().html(buttonShow);
}
});
}
});
});
</script>
<div class="clickme click_{$tpl['sid']}"></div>
<div class="book book_{$tpl['sid']}" style="display:none">
Test
</div>
But again I don't know the ultimate purpose of this so it could be done differently depending. Also I didn't test this so it might not work.
thanks but your code dont work
I try do something like this for all rows
https://www.youtube.com/watch?v=4ZP83A5Q...e=youtu.be
how you can see now work only for last
Hm, seems to be working fine here:
http://jsfiddle.net/27ccdzag/
Make sure you put the Javascript in your footer/headerinclude template rather than in the template where the HTML you provided is at.
(2015-01-07, 05:18 PM)Eric J. Wrote: [ -> ]For multiple toggles I switched out .next()/.prev() for .nextAll()/.prevAll(). Check it out here:
http://jsfiddle.net/0a9hh4t0/1/
omg omg
very very very thanks for this
you are the best