jQuery : how to apply effect on a child element
- by Tristan
Hello, instead of re-writting the same function, i want to optimise my code :
<div class="header">
<h3>How to use the widget</h3>
<span id="idwidget" ></span>
</div>
<div class="content" id="widget">
the JS :
<script type="text/javascript">
$(document).ready(function() {
var showText="Show";
var hideText="Hide";
$("#idwidget").before("<a href='#' class='button' id='toggle_link'>"+showText+"</a>");
$('#widget').hide();
$('a#toggle_link').click(function() {
if ($('a#toggle_link').text()==showText) {
$('a#toggle_link').text(hideText);
}
else {
$('a#toggle_link').text(showText);
}
$('#widget').toggle('slow');
return false;
});
});
This is working just with the div which is called widget and the button called idwidget.
But on this page i have also :
<div class="header">
<h3>How to eat APPLES</h3>
<span id="IDsomethingelse" ></span>
</div>
<div class="content" id="somethingelse">
And i want it to be compatible with the code.
I heard about children attribute, do you have an idea how to do that please ?
Thank you
