javascript на первой вкладке аккордеона работает

Я хочу использовать javascript для отображения скрытого элемента при нажатии на каждой из вкладок аккордеона. Я использовал этот код:

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

     });
 });

Однако это работает только для первой вкладки аккордеона, а не для остальных. Что я могу сделать, чтобы преодолеть это?

это html в фигурных скобках php:

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>

jquery accordion tabs jquery-ui-accordion
person codingNewbie    schedule 22.12.2011    source источник
comment
я думаю, вам лучше использовать переключатель   -  person mgraph    schedule 22.12.2011
comment
Поскольку вы используете идентификаторы (а не классы), это должно повлиять только на один элемент. Можете ли вы показать нам соответствующий HTML?   -  person m90    schedule 22.12.2011
comment
Я тоже пытался переключиться .. и столкнулся с той же проблемой. я добавил в html-код для справки   -  person codingNewbie    schedule 22.12.2011

Ответы (3)


arrow_upward
1
arrow_downward

Если вы добавите класс .accordion-tab ко всем вашим первым вкладкам аккордеона или как вы это сделаете, это должно сработать. Если вы используете идентификаторы, вам понадобится отдельная функция для всех них.

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>
person Ben    schedule 22.12.2011
comment
jsfiddle.net/LyWXV См. измененный jsfiddle, получен отредактированный HTML и изменения в jQuery. - person Ben; 22.12.2011
comment
я пробовал это: echo ‹h3 class='.accordion-tab'›‹a href='#'›.$semester.‹/a›‹/h3›; - person codingNewbie; 22.12.2011

arrow_upward
0
arrow_downward

Вы пробовали использовать

$("#SlideMe1a").live('click', function() {
    $("#SlideMe1a").hide();
    $("#SlideMe1b").slideDown();

     });
 });

?

person gen    schedule 22.12.2011
comment
я тоже пробовал это .. я получаю ту же ошибку. работает только в первой вкладке - person codingNewbie; 22.12.2011
comment
@aneesha Используете ли вы те же идентификаторы на второй вкладке? Это может вызвать проблемы в вашем DOM - person gen; 22.12.2011

arrow_upward
0
arrow_downward

попробуйте удалить style='display: none' в абзаце с id='SlideMe1b'

person snaga    schedule 22.12.2011
comment
я тоже так пробовал.. абзац, который должен быть скрыт, также отображается.. - person codingNewbie; 22.12.2011