Resolved javascript or jquery conflict issue in IBR MyBB forum

It's been a while I've reading a lot on compatibility issue of javascript on web pages. Using multiple javascripts on a single page sometimes negates one or more of them. So the transition effect that you want to see on your website remains doubtful.

With the same issue in my mind, I started another google search this afternoon and was able to break the code. All thanks to the inbuilt feature inside jquery.min.js file that I was able to get the same transition affect on my IBR Mybb forum that the main html page has. The gist of the story is to break the compatibility issue.

Files that I used:

• downloaded latest jquery.min.js file from their website. Rather than going for the entire jquery package, I just downloaded this actual js codes and created an exact replica of jquery.min.js.
• downloaded flexdropdown.js from dynamicdrive.com. I've successfully used this multi-level navigation menu drop down script on many website. I like it since it's compatible with all the web browsers (including IE6). 
• wibiya toolbar

Now, mybb has it's own stack of jscript files inside the package. The issue was both flexdropdown.js and wibiya toolbar inbuilt javascript were conflicting thus neither I could see the drop down working nor wibiya toolbar popping out from down. However, after searching for nearly 2 hours, I got the answer. 

In order to break the conflict, upload jquery.min.js to the jscript folder of mybb along with flexdropdown.js. Now go to mybb Admin >> Template & Style >> Templates >> Choose your template >> scroll down to click Ungrouped Templates >> and click headerinclude.  Search where scripts for prototype.js or general.js are written. Right below those scripts, insert the following code: 

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/jquery.min.js?ver=1600"></script>

<script>

jQuery.noConflict();

</script>

<script type="text/javascript" src="{$mybb->settings['bburl']}/jscripts/flexdropdown.js?ver=1600"></script>

The jQuery.noConflict() script is a feature added to the jquery jscript file. Please note that the second part of script pertaining to flexdropdown.js is only for demonstration purpose so you can place your own jscript file here. Do not forget to click any of the save buttons at the bottom.

Once done, I opened the header template and inserted all the relevant div codes to make the drop down actually work. Viola! it was a success.