slideToggle with slideUp

Question

Я разместил свое резюме на своем веб-сайте, и у меня есть разные разделы, которые скрыты при загрузке страницы. Я использовал slideToggle, чтобы пользователь мог щелкнуть по каждому разделу, чтобы открыть или закрыть его. Эта часть отлично работает. Но я также хотел, чтобы у пользователя была возможность просто открывать или закрывать все разделы сразу, вместо того, чтобы прокручивать страницу вниз или закрывать каждый раздел по одному. Поэтому я создал опцию «Показать все» в верхней части страницы. Как только я попытался заставить это работать, все стало неуклюжим. Вот мой HTML (просто пример), CSS и JQuery:

<div class="toggle"> 
     <h2><span class="toggleIcon">[+]</span> Education</h2> 
      <p>Ph.D. in English, Duke University, 2009-present<p> 
      <p class="indent">Certificate in College Teaching</p> 
      <p class="indent">Certificate in Feminist Studies</p> 
      <p>M.A. in English, Brooklyn College, CUNY, 2008</p> 
      <p>B.A. in English and Anthropology, University of Texas, Austin, 2005</p> 
    </div> 

<div class="toggle"> 
     <h2><span class="toggleIcon">[+]</span> Publications</h2> 
      <h3>Journal Articles</h3> 
       <p class="indent">"'After' Theory," in <span>Theory@Buffalo: Conditions of Possibility</span> 13 (2009). Print.</p> 
      <h3>Book Chapters</h3> 
       <p class="indent">"'I do not want the judgment of any man': The Unstable Animal-Human Boundary in Linguistics and Kafka's 'A Report to an Academy,'' in <span>Of Mice and Men: Animals in Human Culture</span>. Newcastle upon Tyne: Cambridge Scholars Press, 2009. 81-91. Print.</p> 
      <h3>Other</h3> 
       <p class="indent">Rev. of <span>Chang and Eng Reconnected: The Original Siamese Twins in American Culture</span>, by Cynthia Wu, <span>Imperfect Unions: Staging Miscegenation in U.S. Drama and Fiction</span>, by Diana Rebekkah Paulin, and <span>Racial Indigestion: Eating Bodies in the 19th Century</span>, by Kyla Wazana Tompkins, in <span>American Literature</span> 86.2 (2014): 394-396. Print.</p> 
    </div> 

#options { 
    text-align: center; 
    margin-left: -25px; 
} 

#toggleAllIcon { 
    font-style: normal; 
    font-weight: normal; 
    cursor: pointer; 
    font-size: 13px; 
} 

.toggle p, .toggle h3 { 
    display: none; 
} 

$(function() { 
    $(".toggleIcon").click(function() { //when user clicks icon 
     $(this).parent().parent().children("h3, p").slideToggle(); //content slides down or up 
     }); 
    }); 


$(function() { 
    $("#toggleAllIcon").click(function() { 
     if ( 
      $(".toggle h3, .toggle p").is(":visible") 
      ) { 
       $(".toggle h3, .toggle p").slideUp(function() { 
        $(".toggle h3, toggle p").slideToggle(); 
      }); 
     } else { 
      $(".toggle h3, .toggle p").slideToggle(); 
     }; 
    }); 
}); 

Много людей, работающих с этим меню только хочу один раздел, чтобы быть видимым в то время. Просто чтобы уточнить, это не моя проблема. Я хочу, чтобы пользователи имели возможность открывать сразу несколько разделов, если они этого захотят. Я просто хочу, чтобы у них была возможность одновременно контролировать все разделы. С моим исходным кодом, когда я щелкнул «#toggleAllIcon», он будет управлять всем документом, но если пользователь уже открыл раздел, этот раздел закроется, а остальные разделы откроются. Я хочу, чтобы он работал так, что, когда вы нажимаете на этот значок, ВСЕ разделы открываются вместе или закрываются вместе. Я также попытался вызвать стоп после слайдов, но просто выключил весь мой код.

Вы можете увидеть, что происходит с указанным выше кодом: http://www.clare-eileen-callahan.com/ Страница начинает танцевать. Это явно смущает. Я также думаю, что есть не просто правильный способ, но гораздо более эффективный способ добиться эффекта, который я хочу. Помогите оценить!

Answer 1

По-моему, было бы намного легче, если бы вы разделили, когда переключатель должен «Показать все» или «Скрыть все». Я предлагаю использовать toggleClass, чтобы определить, какой переключатель должен делать (slideUp все или slideDown все)

http://codepen.io/anon/pen/dCmak См

Надежда, что помогает немного. Один сценарий, который вы, возможно, захотите рассмотреть, - это то, что произойдет, если пользователь индивидуально расширил все разделы уже, когда они нажимают «Показать все»? И наоборот, «Скрыть все».