Question

I want to use javascript to display a hidden element on click, in each of the accordion tabs. I used this code:

$(document).ready(function(){
  $("#SlideMe1b").hide();
  $("#SlideMe1a").click(function() {
    $("#SlideMe1a").hide();
    $("#SlideMe1b").slideDown();

     });
 });

However, this only works for the first accordion tab and not the rest. What can i do to overcome this?

this is the html within php braces:

echo "</form><form action='addCourse.php' method='post'>
    <p id='SlideMe1a'>Add new Course</p>
    <p id='SlideMe1b' style='display: none'>
    <input type='hidden' name='semester' value=".$allSemesters[$j][0].">
    Course ID: <input type='text' name='course_id' /><br />
    Course Name: <input type='text' name='course_name' /><br />
    <INPUT TYPE='image' SRC='images/add-course.png' BORDER='0' ALT='Submit Form' title='Add Course'>
    <p>

Answer 1

If you add a class .accordion-tab to all your first accordion tabs, or however your doing it, this should work. If you use ID’s you’ll need a seperate function for all of them.

Javascript:

$(document).ready(function(){

$('.accordion-tab').click(function() {
    $(this).next('p').slideDown();  
});

});

HTML:

<p id='SlideMe1a' class='accordion-tab'>Add new Course</p>
<p id='SlideMe1b' style='display: none'>
<input type='hidden' name='semester' value=".$allSemesters[$j][0].">
Course ID: <input type='text' name='course_id' /><br />
Course Name: <input type='text' name='course_name' /><br />
</p>