CODEWITHSUNDEEP
javascript
Ricardo
Ricardo

Reputation: 37

Javascript Show more text

I use this code to hide and show some news, when the user click in the title or in the icons (images/onmenos.jpg, images/onmais.jpg) in this example in "teste1" the all text shows, in this case I have only a link "Click", everything works fine; but when I have a link in the all text like this example the link change the text "Click" to a icon images/onmenos.jpg... and I don't want this...

I think the JavaScript assumes that everything who have "<a href..." show the icon...

<script type="text/javascript">
$(document).ready(function() { 
$('.toggle_container').hide();

$("span.trigger a").click(function() {

 $(".toggle_container", $(this).parent()).animate({ opacity: 1.0 },200).slideToggle(500, function() {


$("a", $(this).parent()).html($(this).is(':visible') ? '<img src="images/onmenos.jpg">' : '<img src="images/onmais.jpg">');


}); 
});

});
</script>

HTML

<font style="font-size:18px; line-height:18px; color:#ffffff;">teste1</font>
<span class="trigger" style=" margin-left:655px;"><a href="javascript:;"><img src="images/onmais.jpg" width="27" height="27" border="0"></a>
<div class="toggle_container">
<a class="teste" href="http://www.teste.com" target="_new"><font style="font-size:18px; line-height:18px; color:#ffffff;">Click</font></a><p />
</div>
</span>

http://jsfiddle.net/2cmRa/

Now i need one change... when i have more than one item, when you open an item other close if they still open

Upvotes: 0

Views: 150

Answers (1)

Martin
Martin

Reputation: 3286

Use a class for your "more"-button. Maybe this jsFiddle Update will help you.

Modified HTML:

<a class="more" href="javascript:;">
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6YRl-z_3JYYWCGScfalkWjL8_iYrvNHXK3WehdDIlp5vnUXpa" width="27" height="27" border="0" />
</a>

Modified JS:

$("a.more", $(this).parent()).html($(this).is(':visible') ? '<img src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSPWCyjrSVQF2vapeyiywRtx5EzIFERSrcI7fodWeSMF9fEKWE0">' : '<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcR6YRl-z_3JYYWCGScfalkWjL8_iYrvNHXK3WehdDIlp5vnUXpa">');

Upvotes: 2

Related Questions