Как разрешить показ одного переключателя div за один раз

Question

Мне интересно, как бы я сделал это, когда вы можете выбирать только по одному. Пожалуйста, имейте в виду, что это для Wordpress. По какой-то причине ему не нравилось «$». Если есть более простой способ, чем то, что я делаю, пожалуйста, дайте мне знать! Любая обратная связь полезна!

HTML

<div id="top-bar" style="width:100%; background-color: #1f2122 !important; padding: 10px 0;"> 
    <div style="width: 392px; margin:auto;"> 
     <div id="locations"> 
      <div id="pull" style=" margin:auto;display: inline-block; padding: 0 9px;"> 
       <a href="#" class="pullmeshr">Sherman Campus</a> 
      </div> 
      <div id="pull" style=" margin:auto;display: inline-block;"> 
       <a href="#" class="pullmedur">Durant Campus</a> 
      </div> 
     </div> 
    </div> 
</div> 
<div style="width: 100%; background-color: #3a3e3f !important;"> 
    <div style="width: 50%; margin: auto;"> 
     <div id="pullmeinfoshr"> 
      <div id="closeshr"> 
       <img href="#" src="http://fusionbible.com/wp-content/uploads/2015/10/close.png"> 
      </div> 
      <div> 
       Sherman Campus Info - Coming Soon 
      </div> 
     </div> 
    </div> 
    <div style="width: 50%; margin: auto;"> 
     <div id="pullmeinfodur"> 
      <div id="closedur"> 
       <img href="#" src="http://fusionbible.com/wp-content/uploads/2015/10/close.png"> 
      </div> 
      <div> 
       Durant Campus Info - Coming Soon 
      </div> 
     </div> 
    </div> 
</div> 
<!-- script to animate campus selector--> 

SCRIPT

<script> 
    window.onOff = 0; 
    jQuery(".pullmeshr").click(function() { 
     jQuery(".pullmeshr").animate(500); 
     jQuery("#pullmeinfoshr").slideDown(500); 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closeshr").click(function() { 
      jQuery("#pullmeinfoshr").slideUp(500); 
     window.onOff = 0; 
    }); 
    } 

    jQuery(".pullmedur").click(function() { 
     jQuery(".pullmedur").animate(500); 
      jQuery("#pullmeinfodur").slideDown(500); 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closedur").click(function() { 
      jQuery("#pullmeinfodur").slideUp(500); 
     window.onOff = 0; 
    }); 
} 
</script> 
<!-- end campus selector script --> 

Answer 1

Если вы просто хотите иметь доступ к идентификатору Jquery $ вы можете следовать WordPress docs:

Однако, если вы на самом деле как short $ вместо jQuery, вы можете использовать follo крыло обертка вокруг кода:

jQuery(document).ready(function($) { 
    // Inside of this function, $() will work as an alias for jQuery() 
    // and other libraries also using $ will not be accessible under this shortcut 
}); 

Для части вопроса в комментариях, попробуйте это (это простое решение, он работает на 2-х вариантов, но для списка вариантов есть лучший способ, чем с указанием каждого идентификатора/класса, используя CSS одноуровневые селекторы и структуру HTML или различные другие методы)

<script> 
    window.onOff = 0; 
    jQuery(".pullmeshr").click(function() { 
     jQuery(".pullmeshr").animate(500); 
     jQuery("#pullmeinfoshr").slideDown(500); 
     jQuery("#pullmeinfodur").slideUp(500); //add this 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closeshr").click(function() { 
     jQuery("#pullmeinfoshr").slideUp(500); 
     window.onOff = 0; 
    }); 
    } 

    jQuery(".pullmedur").click(function() { 
     jQuery(".pullmedur").animate(500); 
     jQuery("#pullmeinfodur").slideDown(500); 
     jQuery("#pullmeinfoshr").slideUp(500); //add this 
     window.onOff = 1; 
    }); 

    if (window.onOff = 1) { 
     jQuery("#closedur").click(function() { 
     jQuery("#pullmeinfodur").slideUp(500); 
     window.onOff = 0; 
    }); 
} 
</script>