자동으로 자바 스크립트 코드를 작성

Question

죄송합니다. 내가 말할 필요가없는 것을 아주 잘 이해하지 못하면 죄송합니다.

저는 기본적으로 포럼 시스템을 코딩하고 있습니다. 포럼 시스템에서는 관리자가 제어판을 통해 새 카테고리를 만들 수있게하고 싶지만,이 문제는 각 카테고리에서 슬라이드가있는 화살표를 사용하고 싶습니다. 최대 상자하지만 내가 어떻게 자동으로 자바 스크립트를 말 코딩의 고유 화살표와 조각 생성 코드의 조각을 추가 할 수있을 것 '화살표가 슬라이드 상자를 클릭하면 그것의 최대'

편집 :
jsfiddle.net/UxJkA 당신은 첫 번째 하나가 올라간다 두 번째를 클릭하고 클래스를 변경하여 손으로 수정하는 방법을 알고 있지만 너무 자동으로 각 클래스의 화살표와 상자의 클래스를 변경하기를 원합니다.

자바 스크립트 코드

 $(document).ready(function(){ 

    $("#a_main_content").show(); 
     $('.arrow').click(function() { 
      $("#a_main_content").slideToggle(); 
     }); 


     $("#p_main_content").show(); 
     $('.p_arrow').click(function() { 
      $("#p_main_content").slideToggle(); 
     }); 

}); 

HTML 코드

 <div id="bottom_corners"></div> 
    <!-- Main content box --> 


    <!-- Category 1 --> 
    <div id="p_content_header"> 
    Category 
    <img src="images/arrow.png" class="p_arrow"> 
    </div> 
    <div id="p_main_content"> 
     <table> 
    <tr> 
    <td class="forum_name_header" style="width:240px;">Forum Name</td> 
    <td class="forum_name_header" style="width: 300px;">Last Post</td> 
    </tr> 
    <tr> 
    <td style="width:240px;" class="forum_name">James first forum<br /> 
          <i style="color: #a3a3a3;">Topics: 858, Messages: 8,485</i></td> 
    <td style="width: 300px;" class="forum_name">Test 1<br /> 
           by <b style="color: red;">Admin</b></td> 
    </tr> 
     <tr> 
    <td style="width:240px;" class="forum_name">James second forum<br /> 
          <i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td> 
    <td style="width: 300px;" class="forum_name">Test 2<br /> 
           by <b style="color: blue;">Mod</b></td> 
    </tr> 
     </table> 
    </div> 
    <div id="bottom_corners"></div> 
    <!-- Category 1 --> 

    <!-- Category 2 --> 
     <div id="p_content_header"> 
    Category 2 
    <img src="images/arrow.png" class="p_arrow"> 
    </div> 
    <div id="p_main_content"> 
     <table> 
    <tr> 
    <td class="forum_name_header" style="width:240px;">Forum Name</td> 
    <td class="forum_name_header" style="width: 300px;">Last Post</td> 
    </tr> 
    <tr> 
    <td style="width:240px;" class="forum_name">James first forum<br /> 
          <i style="color: #a3a3a3;">Topics: 858, Messages: 8,485</i></td> 
    <td style="width: 300px;" class="forum_name">Test 3<br /> 
           by <b style="color: green;">Donator</b></td> 
    </tr> 
     <tr> 
    <td style="width:240px;" class="forum_name">James second forum<br /> 
          <i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td> 
    <td style="width: 300px;" class="forum_name">Test 4<br /> 
           by <b style="color: grey;">Registerd User</b></td> 
    </tr> 
      <tr> 
    <td style="width:240px;" class="forum_name">James second forum<br /> 
          <i style="color: #a3a3a3;">Topics: 434, Messages: 6,534</i></td> 
    <td style="width: 300px;" class="forum_name">Test 5<br /> 
           by <b style="color: #333;"><strike>Banned user</strike></b></td> 
    </tr> 

     </table> 

Answer 1

... 내가 당신의 질문을 이해 정말 모르겠지만, 여기 내 추측와 바이올린의 : http://jsfiddle.net/BXzKC/

<div id="p_content_header">Category 
<img src="images/arrow.png" class="arrow" data-content="first" /> 
</div> 
<div class="content-container" data-content="first"> 
    <table> ... </table> 
</div> 
<div id="p_content_header">Category 2 
    <img src="images/arrow.png" class="arrow" data-content="second" /> 
</div> 
<div class="content-container" data-content="second"> 
    <table> ... </table> 
</div> 

이제 각 "상자"에는 공통 클래스와 식별 할 수있는 일부 데이터 속성이 있습니다. 각 화살표에는 공통 클래스와 동일한 데이터 속성이 있습니다.

$(".content-container").show(); 
$('.arrow').click(function (e) { 
    var cat = $(e.currentTarget).data('content'); 
    $('.content-container[data-content="' + cat + '"]').slideToggle(); 
}); 

기본적으로 첫 번째 줄에는 모든 상자가 한 번에 표시됩니다. 그런 다음 어떤 화살표를 클릭해도 해당 데이터를 읽고 확장/축소 할 상자를 식별하는 데 사용합니다.

당신은 여전히 ​​그 데이터에 대한 몇 가지 값을 직접 제시해야합니다 (상자의 이름? 간단한 계산? 모든 것을 무시하고 화살표가있는 div 바로 뒤에있는 상자를 잡아도됩니다. 또는 그들을 함께 또는 뭔가 포장하십시오),하지만 그것은 다른 문제입니다.