I have successfully set up a bootply using your code - Bootply - after removing the comment that closed the function.
(function( $ ) { // closure to prevent
In order to trigger the fade-in effect, I have added a
<div class="fadein-link">fade in</div>
.
Update:
After receiving feedback on the issue with duplicate jQuery includes, one in the header and one in the footer, it is recommended to avoid using multiple versions of jQuery unless absolutely necessary. Removing one of the includes did not resolve the problem.
If you encounter any javascript errors, it is advised to use web developer tools to identify and address them. For Firefox, refer to this link: https://developer.mozilla.org/en-US/docs/Tools/Web_Console, and for Chrome, check here: https://developer.chrome.com/devtools/docs/console
Consider using the versions of jquery/jquery.ui/bootstrap from the functional bootply to troubleshoot the current issue:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.2/jquery-ui.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
As a side note, new users should refrain from engaging in prolonged discussions in comments. Refer to this link for more information: . Extended discussions can be moved to chat with at least 20 reputation points required. Consider cleaning up unnecessary comments to maintain clarity.