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

Question

I have created 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

I have tried the solution provided in these URLs

• 1st
• 2nd

But does not got success.

MY 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>

Restrained

Answer 1

You can get URL Hash with window.location.hash and add in class to toggle via getElementById(hash)

Try the following code.

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');
}

Chickasaw

Answer 2

use class in like this

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

In Bootstrap 4.0 You need to add show class in place of in.

Agriculture