Menu
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
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>
717
To control (show/hide) the collapsible content, add the data-toggle="collapse" attribute to an <a> or a <button> element. Then add the data-target="#id" attribute to connect the button with the collapsible content (<div id="demo">).
Just add data-toggle="collapse" and a data-target to the element to automatically assign control of one or more collapsible elements. The data-target attribute accepts a CSS selector to apply the collapse to. Be sure to add the class collapse to the collapsible element.
Assuming that you're using Bootstrap 4, you can simply remove the data-parent attribute from the element with the collapse class. This subscribes the collapse to events on #accordionExample , which is the main accordion element, via the data-parent attribute.
data-toggle = "collapse" is added to the link on which you click to expand or collapse the component. href or a data-target attribute is added to the parent component, whose value is id of the child component.
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');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
