Expand divs

Question

私はdivをクリックしてdivをクリックしてそのコンテンツを展開したいのですが、もう一度クリックするとそのコンテンツは非表示になりますが、それはうまくいきますが、別のdivがあり、 divを同時に展開した場合、どうすればよいですか？

それはよくないですこれ、私はこれはこれは私が到達したいものである

？：起こらないことを確認することができますどのように、あなたは、私はいくつかのdivが展開することができ、この時点でご覧ください。

jQueryの機能私は新しいものでクリックしたときに、どのように私は他の拡大のdivを折りたたむことができます？：

$(".contact_item .head").click(function() { 
      if ($(this).parent('div').hasClass('expanded')) { 
       $(this).next('div').slideUp(); 
       $(this).parent('div').removeClass('expanded'); 
      } else { 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 
     }); 

HTMLコード：

<div class="container"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-3"> </div> 
       <div class="col-lg-9 col-md-9 col-sm-9 white"> 
        <div class="row"> 
         <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style> 
          <div class="title">Contact us</div> 
          <div class="row"> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
                                        <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One Embarcadero Center Suite 500, San Fransisco, 94111, CA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (415) 639-3001 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (727) 578-2800 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (0207) 101-9395 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 123 Fake st , Springfield, 12345, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 555 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
             <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 4449 Easton Way 2nd Floor, Columbus, 43219, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (614)526-8754 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One International Plaza Suite 550, Philadelphia, 19113, PA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (215) 279-5845 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 950 Echo Lane Suite 200, Houston, 77024, TX 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (832) 586-0301 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 1100 Dexter Avenue North Suite 100, Seattle, 98109, WA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (253)271-9692 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
          </div> 
         </div> 

UPDATE：これは私は少し私のjQueryの機能を変更した、今ではただ一つのdivが展開できますが、私はdiv要素を展開する二回クリックする必要がCSS

.contact_item { 
     width: 100%; 
     border: 1px solid #f1e7e0; 
     background-color: #fcf6f5; 
     margin: 3px 0px; 
     float: left; 

     &.expanded { 
      .head .name { 
       color: #f60; 
      } 

      .head .name span { 
       border-color: #f60; 
       color: #f60; 

       &.plus { 
        display: none; 
       } 

       &.minus { 
        display: block; 
       } 
      } 
     } 

     .head { 
      .name { 
       font-family: "Tahoma"; 
       color: rgb(100, 100, 100); 
       font-size: 11.1px; 
       text-transform: uppercase; 
       padding: 7px 15px; 
       cursor: pointer; 
       position: relative; 

       span { 
        position: absolute; 
        display: block; 
        width: 20px; 
        height: 20px; 
        border-radius: 50%; 
        border: 1px solid #706f6f; 
        text-align: center; 
        right: 15px; 
        top: 7px; 
        font-size: 18px; 
        line-height: 17px; 

        &.minus { 
         display: none; 
        } 
       } 
      } 
     } 
    } 

です、最初の時間は、それは他の拡大のdivを閉じますが、私がクリックしたものを開かず、2回目は開かれている：

$(".contact_item .head").click(function() {    
      if ($(".contact_item .head").parent('div').hasClass('expanded')) { 
       $(".contact_item .head").next('div').slideUp(); 
       $(".contact_item .head").parent('div').removeClass('expanded'); 

      } else { 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 
     }); 

Answer 1

は、それらは素敵な提案をしたが、完全に動作しませんでした、最終的にはこれがあります私は私の機能を行なったし、今では動作します：

$(".contact_item .head").click(function() { 
      var flag = $(this).parent('div').hasClass('expanded');    
      if ($(".contact_item .head").parent('div').hasClass('expanded')) { 
       $(".contact_item .head").next('div').slideUp(); 
       $(".contact_item .head").parent('div').removeClass('expanded');     
       if (flag==false) { 
        $(this).parent('div').addClass('expanded'); 
        $(this).next('div').slideDown(); 
       } 
      }   
      else { 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 
     }); 

Answer 2

私はあなたの要件を実装してみました：

https://jsfiddle.net/pje7Lznf/

<div class="container"> 
      <div class="row"> 
       <div class="col-lg-3 col-md-3 col-sm-3"> </div> 
       <div class="col-lg-9 col-md-9 col-sm-9 white"> 
        <div class="row"> 
         <div class="col-lg-9 col-md-9 col-sm-8 col-xs-12 rghtpd"><style>.rghtpd{padding-right: 0px !important; width:583px;}</style> 
          <div class="title">Contact us</div> 
          <div class="row"> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
                                        <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">California office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One Embarcadero Center Suite 500, San Fransisco, 94111, CA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (415) 639-3001 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Florida office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 9600 Koger Blvd. Suite 225, St. Petersburg, 33702, FL 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (727) 578-2800 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">London office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 Lloyd's Building, Gallery 4 12 Leadenhall St., London, EC3V 1LP, England 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (0207) 101-9395 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">myName office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 123 Fake st , Springfield, 12345, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 555 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
           <div class="col-lg-6 col-md-6 col-sm-12 col-xs-12"> 
             <div class="contact_item expanded"> 
              <div class="head"> 
               <div class="name">Ohio office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: block;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 4449 Easton Way 2nd Floor, Columbus, 43219, OH 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (614)526-8754 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item"> 
              <div class="head"> 
               <div class="name">Pennsylvania office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info" style="display: none;"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 One International Plaza Suite 550, Philadelphia, 19113, PA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (215) 279-5845 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">Texas office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 950 Echo Lane Suite 200, Houston, 77024, TX 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (832) 586-0301 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
             <div class="contact_item "> 
              <div class="head"> 
               <div class="name">WASH office<span class="plus">+</span> <span class="minus">-</span></div> 
              </div> 
              <div class="info"> 
               <ul> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/marker.png"></div> 
                 1100 Dexter Avenue North Suite 100, Seattle, 98109, WA 
                </li> 
                <li> 
                 <div class="icon"><img alt="" src="//lig.azureedge.net/public/UK/Content/Images/phone.png"></div> 
                 (253)271-9692 
                </li> 
               </ul> 
               <div class="clearfix"></div> 
              </div> 
             </div> 
           </div> 
          </div> 
         </div> 

$(".contact_item .head").click(function() { 

      if ($(this).parent('div').hasClass('expanded')) { 
       $(this).next('div').slideUp(); 
       $(this).parent('div').removeClass('expanded'); 
       $(".info").each(function(i , obj){ 
        console.log($(obj)) 
        $(obj).removeClass('expanded'); 
        $(obj).slideUp(); 
       }) 
      } else { 
       $(".info").each(function(i , obj){ 
        console.log($(obj)) 
        $(obj).removeClass('expanded'); 
        $(obj).slideUp(); 
       }) 
       $(this).parent('div').addClass('expanded'); 
       $(this).next('div').slideDown(); 
      } 


     }); 

.contact_item{ 
    background-color: #bdc3c7; 
    color: white; 
    margin-bottom: 10px 
} 

Answer 3

私はjQueryのコードはこのような何かに煮詰めすることができるシンプルなCSSベースのソリューションと一緒にバイオリンを置く：

$('.contact_item').on('click', '.head', function() { 
    var clicked = $(this).closest('.contact_item'); 
    $('.contact_item.expanded').add(clicked).toggleClass('expanded'); 
}); 

ソリューションは、アニメーションと離れませんそれは私がどのようにこれらのタイプの状況を扱っているのか、それは比較的清潔なスーパーです。それは、必要に応じてバックでアニメーションを追加するには、ここからかなり単純な運動であってもよいが、素敵な代替手段として、この解決策を検討する必要があります。

Fiddle w/ solution