In this tutorial, you will learn how to release and collapse content using JavaScript.
You can see our demo here: https://entheosweb.com/video_tutorials/Collapse/
Step: 1 – You should know where and what content to use and you should identify the place where you want this release and collapse to happen on your webpage.
Step: 2 – Now make your CSS and JS files, using the URL here :
https://entheosweb.com/video_tutorials/Collapse/easyfaq.js
copy and paste the java script codes to your html editor and save it as easyfaq.js
Similarly using the URL here: https://entheosweb.com/video_tutorials/Collapse/rollover.js
copy and paste the codes to your html editor and save it as rollover.js
Upload both the easyfaq.js and rollover.js to your root directory.
Step: 3 – Using your index.html file, select the place where you want the release and collapse on clicking to take place, in this instance I want this effect to take effect just below the first paragraph, now copy and past the below codes there:
<p>
<script src=”rollover.js” type=”text/javascript”></script>
</p>
<p>
<script src=”easyfaq.js” type=”text/javascript”></script>
<span style=”text-decoration: underline;”><a href=”javascript:void(0);” onclick=”toggleFaq(1);”>
<span class=”black”>
<h1><span style=”text-decoration: underline;”>VALUES</span></h1>
</span></a></span></p>
<div id=”faq1” style=”DISPLAY: none”>
Content for the above topic comes here…
</div>
<p>
As you can see in the above codes, your content or image must come under the faq1 style “DISPLAY” area, you can use this multiple times on the same page to have the same effect as the demo, but be careful at the point where the toggleFaq(1) and the div id =”faq1″ make sure when you call the toggleFaq(2) make sure that you also change the div id=”faq2″ as well.
Step: 4 – Last but not the least, go to the header tag on top of the index.html page and paste these codes:
<script src=”rollover.js” type=”text/javascript”></script>
<script src=”easyfaq.js” type=”text/javascript”></script>
Here I am calling for my rollover.js and easyfaq.js files.
Save the index.html file and upload them using FTP to your root directory.
You can see our demo here: https://entheosweb.com/video_tutorials/Collapse/
Delete your cache and refresh your browser to see the collapse and release on click take effect.
Congratulations! You now know how to release and collapse content using Java Scripts. We hope you found this tutorial helpful!
Here is the video tutorial again for your reference:
Related Tutorials
