別のページからさまざまなブートストラップ崩壊部を展開します

Question

私は2つのphpファイルを持っています。これは最初のファイルです：

第一バナーのリンク＃のサービス1

第二のWebをservices.phpする：services.php

<a href="#services1" data-collapse-group="servicesgroup" data-toggle="collapse" data-target="#services1"> 
<div class="button-blue">Learn More</div> 
</a> 

<a href="#services2" data-collapse-group="servicesgroup" data-toggle="collapse" data-target="#services2"> 
<div class="button-blue">Learn More</div> 
</a> 

<div class="solutions"> 
    <div id="services1" class="collapse" > 
    <section> CONTENT </section> 
    <section> MORE CONTENT </section> 
    </div> 

    <div id="services2" class="collapse" > 
    <section> CONTENT </section> 
    <section> MORE CONTENT </section> 
    </div> 
</div> 

は、第二のファイルindex.phpを行う必要があり、リンクが2つのバナーを持っていますservice.phpへのバナーリンクservices

index.phpの最初のWebバナーをクリックすると、＃services1折りたたみ可能なdivだけを展開する必要があります。

index.phpの2番目のWebバナーをクリックすると、＃services2 collapsible divのみを展開する必要があります。

services.php内のボタンから/崩壊を拡張するために使用されている私の現在のJavaScript関数は：

//Bootstrap Collapse Group from within Page 

$("[data-collapse-group='servicesgroup']").click(function() { 
var $this = $(this); 
$("[data-collapse-group='servicesgroup']:not([data-target='" + 
$this.data("target") + "'])").each(function() { 
    $($(this).data("target")).removeClass("in").addClass('collapse'); 
}); 
}); 


//Bootstrap Scroll Up 

$("div").click(function() { 
$('html,body').animate({ 
    scrollTop: $(".solutions").offset(500).top}, 
    'slow'); 
}); 

はセミ別のページからのリンクのためにJavascriptを機能し：

これは私が見つけた唯一のJavascriptですそれは半ば動作しているようです。なぜならindex.php上のWebバナーをクリックすると、services.phpページの折りたたみ可能なdivが開きますが、services.phpのボタンの機能はdivを展開したり閉じたりしないからです。私は、それぞれの折り畳み式のdivを開くためにそれを必要とするときも、それは、すべての折りたたみ可能なdivを開きます（すなわち、＃のサービス1またはindex.phpの上の第一または第二のバナーがクリックされた＃1 SERVICES2）

$(document).ready(function() { 

$(".collapse").hide(); 

$(".solutions").click(function() { 

    $(this).next(".collapse").slideToggle(400); 
});  

if(window.location.hash && window.location.hash.replace("#", "") == "services1"){ 
    $('.collapse').show(); 
} 

}）;

私はjavascriptの初心者ですので、ステップバイステップの説明または正確なコピー＆ペーストのコードが必要です。

何か助けていただければ幸いです。

Answer 1

イエス様ありがとうございます！後に多くの外部リンク（別のページ）からブートストラップ崩壊のdiv開口部の話題に、このサイトや複数のサイトで検索して何の結果、以下が働いを見つけない：

1. コードのために働く：外部ページへのリンク別のページ上の折りたたみDIVを展開するが、同じページ上 他の崩壊のボタンをクリックしたときに崩壊DIVを隠しません。

   $(document).ready(function() { 
       $(window.location.hash).show(); 
   }); 
   

2. コードのために働く：外部ページリンクを崩壊DIVを展開します別のページにある の折りたたみボタンをクリックすると、折りたたみDIVが非表示になります。他のボタンの折りたたみ機能が正しく動作：別のページでDIVアンカーを折りたたむために複数のリンク含む

   $(document).ready(function() { 
       $(window.location.hash).addClass('collapse in'); 
   }); 
   

3. まずファイル（index.phpを）：

   LINKED IMAGE: services.php#services1 
   LINKED IMAGE: services.php#services2 
   LINKED IMAGE: services.php#services3 
   

4. セカンドファイル（services.php）を含みますCollapse DIVS：サービス。PHP

   <a href="#services1" data-collapse-group="servicesgroup" data- 
   toggle="collapse" data-target="#services1"> 
   <div class="button-blue">Learn More</div> 
   </a> 
   
   <a href="#services2" data-collapse-group="servicesgroup" data- 
   toggle="collapse" data-target="#services2"> 
   <div class="button-blue">Learn More</div> 
   </a> 
   
   <a href="#services3" data-collapse-group="servicesgroup" data- 
   toggle="collapse" data-target="#services2"> 
   <div class="button-blue">Learn More</div> 
   </a> 
   
   <div class="solutions"> 
       <div id="services1" class="collapse" > 
       <section> CONTENT </section> 
       <section> MORE CONTENT </section> 
       </div> 
   
       <div id="services2" class="collapse" > 
       <section> CONTENT </section> 
       <section> MORE CONTENT </section> 
       </div> 
   
       <div id="services3" class="collapse" > 
       <section> CONTENT </section> 
       <section> MORE CONTENT </section> 
       </div> 
   </div> 
   

5. 3番目のファイル（services.js）はservices.php内/ボタンから崩壊を拡張するために使用されている現在のJavascript機能が含まれています

   //Expand Collapse DIV from External Link and Internal Collapse buttons work 
   
   $(document).ready(function() { 
       $(window.location.hash).addClass('collapse in'); 
   }); 
   
   //Collapse DIV Group from within Page 
   
   $("[data-collapse-group='servicesgroup']").click(function() { 
   var $this = $(this); 
   $("[data-collapse-group='servicesgroup']:not([data-target='" + 
   $this.data("target") + "'])").each(function() { 
   $($(this).data("target")).removeClass("in").addClass('collapse'); 
       }); 
   }); 
   
   
   //Scroll Up DIV when clicking on Collapse Button within page 
   
   $("div").click(function() { 
   $('html,body').animate({ 
       scrollTop: $(".solutions").offset(500).top}, 
       'slow'); 
   });