jquery toggle работает только на части div

Question

У меня есть проблема касательно jquery toggle.

Кажется, что это не включает в себя навыки.

<section class="ResumeItem"> 
     <header class="ResumeContentTitle" id="ResumeKnowledgeHeader"> 
      <p>Professional Knowledge</p> 
     </header> 
     <section class="skills"> 
      <header> 
       <h3>Strong Skills</h3> 
      </header> 
      <ul> 
       <li>PHP</li> 
       <li>jQuery</li> 
       <li>SQL</li> 
       <li>Ajax</li> 
       <li>HTML</li> 
       <li>CSS</li> 
      </ul> 
     </section> 

     <section id="ResumeKnowledge" class="ResumeContentText"> 
      <ul> 
       <li>PHP – Expert Strong level. Worked with this technology for over a year.</li> 
      </ul> 
     </section> 
</section> 

JavaScript:

$(function(){ 
    $('.ResumeContentTitle').click(function(){ 
     var id = $(this).attr('id').split('Header'); 
     $('#'+id[0]).toggle("slow"); 
    }); 
}); 

вот пример: http://jsfiddle.net/ohadpartuck/R2cEd/

Answer 1

навыки не выбран, так как у вас нету включили их просто включить их

работает скрипку http://jsfiddle.net/swamimayank/ghQxp/ или http://jsfiddle.net/swamimayank/hNKpq/

$(function(){ 
    $('.ResumeContentTitle').click(function(){ 

     $(".skills ,.ResumeContentText").toggle("slow"); 


    }); 
}); 

Answer 2

Как я понимаю, ваш код предназначен для повторного использования для других ящиков, другие ответы вам действительно не помогут.

Что я сделал, добавлен идентификатор в раздел навыков и добавил, что для javascript для первой части идентификатора будут взяты из div, на который было нажато, как вы это сделали, но я добавил слово навыков до конца, так что это тоже скроет.

HTML

<section class="ResumeItem"> 
        <header class="ResumeContentTitle" id="ResumeKnowledgeHeader"> 
         <p>Professional Knowledge</p> 
        </header> 
        <section class="skills" id="ResumeKnowledgeSkills"> 
         <header> 
          <h3>Strong Skills</h3> 
         </header> 
         <ul> 
          <li>PHP</li> 
          <li>jQuery</li> 
          <li>SQL</li> 
          <li>Ajax</li> 
          <li>HTML</li> 
          <li>CSS</li> 
         </ul> 
        </section> 

        <section id="ResumeKnowledge" class="ResumeContentText"> 

         <ul> 
          <li>PHP – Expert Strong level. Worked with this technology for over a year.</li> 

         </ul> 
        </section> 
       </section>​ 

JavaScript

$(function(){ 
    $('.ResumeContentTitle').click(function(){ 
     var id = $(this).attr('id').split('Header'); 
     $('#'+id[0]).toggle("slow"); 
     $('#'+id[0]+'Skills').toggle("slow"); 
    }); 

});​ 

jsFiddle http://jsfiddle.net/R2cEd/10/