Problem in JQuery

[Noskiw]

What I'm basically trying to do is to make the text change from "view" to "close". And Once it is closed, change it back to "view".

This is my code

 

<script src="./jquery/jquery.js" type="text/javascript"></script>
<script type="text/javascript">

$(document).ready(function(){
   $('#1').hide(); 
   $('#2').hide(); 
   $('#3').hide(); 
   $('#4').hide(); 
   $('#5').hide();
   
   $('a#view1').click(function(){
        $('#1').slideToggle(200);
   });
   
   $('a#view2').click(function(){
        $('#2').slideToggle(200);
   });
   
   $('a#view3').click(function(){
        $('#3').slideToggle(200);
   });
   
   $('a#view4').click(function(){
        $('#4').slideToggle(200);
   });
   
   $('a#view5').click(function(){
        $('#5').slideToggle(200);
   });
    
});

</script>
<p align="left"><a href="#" id="view1" style="position: static;">View MJ's Bio</a></p>
<div id="1">
<table>
    <img src="./css/images/mj1.jpg" class="b" width="200" height="200" />
    <p align="left"><b><u>MJ - Vocalist</u></b>
    </p><p align="left">
        <?php include './include/bio/mj.php'; ?>
    </p>
</table>
<br /><br /><br /><br />
</div>

<p align="left"><a href="#" id="view2" style="position: static;">View Sai's Bio</a></p>
<div id="2">
<table>
    <img src="./css/images/sai1.jpg" class="b" width="200" height="200" />
    <p align="left"><b><u>Sai - Lead Guitar</u></b></p>
    <p align="left">
    </p>
</table>
<br /><br /><br /><br /><br /><br /><br /><br />
</div>

<p align="left"><a href="#" id="view3" style="position: relative;">View Paddy's Bio</a></p>
<div id="3">
<table>
    <img src="./css/images/paddy.jpg" class="b" width="200" height="200" />
    <p align="left"><b><u>Paddy - Bassist</u></b></p>
    <p align="left"> 
        <?php include './include/bio/paddy.php'; ?>
    </p>
</table>
</div>

<p align="left"><a href="#" id="view4" style="position: relative;">View Matt's Bio</a></p>
<div id="4">
<table>
    <img src="./css/images/matt.jpg" class="b" width="200" height="200" />
    <p align="left"><b><u>Matt - Rhythm Guitar</u></b></p>
    <p align="left"> 
        <?php include './include/bio/matt.php'; ?>
    </p>
</table>
</div>

<p align="left"><a href="#" id="view5" style="position: relative;">View Callum's Bio</a></p>
<div id="5">
<table>
    <img src="./css/images/callum.jpg" class="b" width="200" height="200" />
    <p align="left"><b><u>Callum - Drums</u></b></p>
    <p align="left"> 
        <?php include './include/bio/callum.php'; ?>
    </p>
</table>
</div>

 

The JQuery is at the top.

[RichardRotterdam]

this code is taken from the jQuery documentation http://api.jquery.com/slideToggle/

$('#clickme').click(function() {
  $('#book').slideToggle('slow', function() {
    // Animation complete.
  });
});

 

What you need to do is write out the event that changes the text. Read the comment on where to place this

$('a#view1').click(function(){
    $('#1').slideToggle(200, function(){
        // your code that changes the text from 'view' to 'close' and back here
    });
});

Also it would be easer to use the css selector by class so you dont have to repeat the same code for each slide item.