如何通过 URL expand/un-collapse FAQ (Bootstrap) 的特定面板

Question

我创建了FAQ page using bootstrap 3. I want to expand/un-collapse the specific panel of question via URL. URL is like http://dailymotionfile.com/faqs#faq1

我已经尝试过这些 URL 中提供的解决方案

1st
2nd

但是没有成功。

我的HTML

<div class="panel-group" id="accordion">

    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
            <a data-toggle="collapse" data-parent="#accordion" href="#faq1">
            <span class="glyphicon glyphicon-plus"></span>
            How to download video from Dailymotion? </a>
            </h4>
        </div>
        <div id="faq1" class="panel-collapse collapse">
            <div class="panel-body">
            <a name="faq1"></a>
            1. Copy Page URL with a favourite <strong>video</strong> from your browser address bar;<br/>
            <br/>
            2. Paste Page URL into the site form (to <a href="http://dailymotionfile.com/">http://dailymotionfile.com</a>) and press "Get direct link";
            <br/>
            3. When your link (link to a file) will be found - press the link "Get direct link" (under the form) the right mouse button and select in the menu "Save link as..."
            <br/>
            4. Some of the dailymotion services do not provide you with the real name of the video file.<br/>
            So, you will need to rename a file before or after saving (for example: <strong>video.flv</strong>).<br/>
            Use for example: VLC Player for video playback (.flv and others). </div>
        </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#faq2">
        <span class="glyphicon glyphicon-plus"></span>
        What video formats can I download? </a>
        </h4>
    </div>
    <div id="faq2" class="panel-collapse collapse">
        <div class="panel-body">
        <a name="faq2"></a>
        You can download videos in FLV, MP4, WebM, MOV or 3GP (mobile) formats depending on the video provider.<br/>
        <br/>
        For example, you can download from Dailymotion in MP4 format.<br/>
        For Dailymotion videos in high quality - available MP4 video file in HD resolution (or Full HD - depends on a videoclip).
        </div>
    </div>
    </div>

    <div class="panel panel-default">
    <div class="panel-heading">
        <h4 class="panel-title">
        <a data-toggle="collapse" data-parent="#accordion" href="#faq3">
        <span class="glyphicon glyphicon-plus"></span>
        From what sites I can download video? </a>
        </h4>
    </div>

    <div id="faq3" class="panel-collapse collapse">
        <div class="panel-body">
        <a name="faq3"></a>
        <a href="http://dailymotionfile.com/">DailymotionFile.com</a> supports only Dailymotion links yet. </div>
    </div>
    </div>

</div>

Answer 1

你可以用 window.location.hash 得到 URL Hash 并添加 in class 通过 getElementById(hash)

切换

试试下面的代码。

if(window.location.hash)
{
    // hash found
    var hash = window.location.hash.substring(1); //Puts hash in variable, and removes the # character
    alert (hash);
    document.getElementById(hash).classList.toggle('in');
}

Answer 2

像这样使用classin

<div id="faq2" class="panel-collapse collapse in">

在 Bootstrap 4.0 中您需要添加 show class 代替 in.

如何通过 URL expand/un-collapse FAQ (Bootstrap) 的特定面板

How to expand/un-collapse the specific panel of FAQ (Bootstrap) via URL

jquery

accordion

jquery-ui-accordion

twitter-bootstrap