Question

Hi again 🙂
I’m using jQuery script to show/hide some content:

<script type="text/javascript">
$('.toggleButton').click(function() {
    var id = this.id.replace('toggleButton', '');
    $('#content' + id).toggle();
});
</script>

Since I’m using PHP, I am iterating through few items and each of them has a button to show/hide its content. My content is actually a form with few input fields. In each item, first field of my form has a same name (let’s say ‘line1’).
What I would like to do is when I click on an item and open its content, to take a focus on input field ‘line1’. When I click on other item to take a focus on its ‘line1’ field, and so on…
Preferably with jQuery because I suppose it would be simpler, but javascript solution would be also great 🙂

Thanks for any help!

EDIT: I will attach a part of code which is that I need to show and hide… Maybe it will be of some help… I am using codeigniter, so not to be confused by some functions 🙂

echo "<div class=\"toggleButton\" id=\"toggleButton".$item['id']."\">CLICK TO OPEN</div>";
echo "<div class=\"content\" id=\"content".$item['id']."\" style=\"display:none;\">";
echo form_open('title/add'); // codeigniter's open form
for ($i = 1; $i <= $item['rows']; $i++) {
    echo "<input type=\"text\" class=\"line\" id=\"line".($i)."\">".br();
}
echo form_submit('submit', 'submit'); // codeigniter's submit for button
echo "</form>";
echo "</div>";

Answer 1

Change your last line to:

$('#content' + id).toggle().find('input').first().focus()