divに外部コンテンツを読み込んでアコーディオンを開きます

Question

divに外部コンテンツを読み込む方法を理解してから、アコーディオンを開いてコンテンツ内をナビゲートします。

私にid =「ACD」とdivにHTMLコンテンツをロードするために、クリックイベントに次のjQueryを使用しています：customers.html以内

$("#customers").click(function() { 
     $('#acd').load('includes/customers.html'); 
}); 

は、最初のアコーディオン（collapseOne）2つのアコーディオンですcollapseによって定義されるように折りたたまれ、第2の（collapseTwo）は、collapse inによって定義されるように展開される。ここでは基本的な構造である：私はそれの両方が#collapseOneへの外部コンテンツをロードし、アコーディオンを開くようにJavaScriptを修正しようとした基本的なスキルを持つ

<div id="accordion" role="tablist"> 
<div> 
    <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseOne"> 
    Accordion One 
    </a> 
</div> 
<div id="collapseOne" class="collapse" role="tabpanel"> 
    <div> 
    <p>Accordion One Content</p> 
    </div> 
</div> 
<div> 
    <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo"> 
    Accordion Two 
    </a> 
</div> 
<div id="collapseTwo" class="collapse in" role="tabpanel"> 
    <div> 
    <p>Accordion Two Content</p> 
    </div> 
</div> 
</div> 

、それが崩壊したままになります。私は、アコーディオンを展開する前にcustomers.htmlを完全にロードする必要があると想定していますが、それをどのように処理するかは不明です。

$('#customers').click(function() { 
    $('#acd').load('includes/customers.html#collapseOne').collapse("show"); 
}); 

Answer 1

これはあなたが探しているものかどうかはわかりません。

以下は私の例です。

HTML

Just assume that the textarea below is external page 
<div class="row"> 
<div class="col-sm-4"><textarea class="form-control text t1">This is 1st html result</textarea></div> 
<div class="col-sm-4"><textarea class="form-control text t2">This is 2nd html result</textarea></div> 
<div class="col-sm-4"><textarea class="form-control text t3">This is 3rd html result</textarea></div> 
</div> 
<br/> 
<button class="btn btn-sm btn-warning test"> 
Click Me! 
</button> 
@ Change and trigger click : 
<button class="btn btn-sm btn-primary bt" data-page="t1" data-target="collapseOne"> 
Item #1 
</button> 
<button class="btn btn-sm btn-primary bt" data-page="t2" data-target="collapseTwo"> 
Item #2 
</button> 
<button class="btn btn-sm btn-primary bt" data-page="t3" data-target="collapseThree"> 
Item #3 
</button> 
<br/> 
<br/> 
<div id="accordion" role="tablist" aria-multiselectable="true"> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingOne"> 
     <h5 class="mb-0"> 
     <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> 
      Collapsible Group Item #1 
     </a> 
     </h5> 
    </div> 

    <div id="collapseOne" class="collapse active" role="tabpanel" aria-labelledby="headingOne"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingTwo"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"> 
      Collapsible Group Item #2 
     </a> 
     </h5> 
    </div> 
    <div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
    <div class="card"> 
    <div class="card-header" role="tab" id="headingThree"> 
     <h5 class="mb-0"> 
     <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree"> 
      Collapsible Group Item #3 
     </a> 
     </h5> 
    </div> 
    <div id="collapseThree" class="collapse" role="tabpanel" aria-labelledby="headingThree"> 
     <div class="card-block"> 
     Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS. 
     </div> 
    </div> 
    </div> 
</div> 

JAVASCRIPT

$('.test').on('click',function(){ 

    var t1 = $(".t1").val(); // page 1 
    var t2 = $(".t2").val(); // page 2 
    var t3 = $(".t3").val(); // page 3 

    /* 
    change the html function to load @ ajax request 
    */ 

    $("#collapseOne > div").html(t1); 
    $("#collapseTwo > div").html(t2); 
    $("#collapseThree > div").html(t3); 

}); 

$('.bt').on('click',function(){ 

    var dt = $(this).data("target"); 
    var pg = $(this).data("page"); 
    // var rs = $("." + pg).prop("value"); @ 
    var rs = $("." + pg).val(); 

    /* 
    change the html function to load @ ajax request 
    if you're using another version of bootstrap, please change 'active' to 'in' 
    */ 

    $("#accordion").find("div.active").removeClass("active"); 
    $("#" + dt).addClass("active"); 
    $("#" + dt + " > div").html(rs); 

}); 

と作業ライブ例：https://jsfiddle.net/synz/2ba5k6j3/

私はこの例ではあなたを助けることができると思います。