add toggle image button javascript to cms page

I want to add toggle image button `javascript` to `cms` page..

My websit

click the button -> dropdown hiden image in the my homepage index

this is possible ?

<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

<script type="text/javascript" src="http://code.jquery.com/jquery-2.1.4.min.js">
</script>

<script type="text/javascript">
$(document).ready(function() {
$("#slide1 ").click(function() {
$("#slide2 ").slideToggle(1000);
});
});
</script>

<a href="
http: /microwave.com/skin/frontend/default/MAG090198_Layout2/js/slide.js" id="slide1">
Click to Slide Toggle milliseconds </a>
<br>
<br>
<p id="slide2" style="width:100%;display:block;background:red;height:180px">This is demo paragraph for slide functionality.</p>

<!-- end snippet -->



<!-- begin snippet: js hide: false -->

<!-- language: lang-html -->

<div class="content-top">
<div class="left-category">{{block type="catalog/navigation" template="advancedmenu/top.phtml"}}{{block type="catalog/navigation" template="catalog/navigation/sidenavigation.phtml"}}</div>
<div class="home-slider">
<div id="ei-slider" class="ei-slider">
<ul class="ei-slider-large">
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/main-banner1.jpg}}" />
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/Untitled-15.jpg}}" />
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/Untitled-16.jpg}}" />
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/black.jpg}}" />
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/asd.jpg}}" />
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/123456.jpg}}" />
</a>
</li>
</ul>
<ul class="ei-slider-thumbs">
<li class="ei-slider-element">Current</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/main-banner1.jpg}}" /><span class="info1">Cavity</span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/Untitled-15.jpg}}" /><span class="info1">Ceramic</span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/Untitled-16.jpg}}" /><span class="info1">Divider</span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/black.jpg}}" /><span class="info1">Amplifiers</span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/asd.jpg}}" /><span class="info1">Fiber Optic</span>
</a>
</li>
<li>
<a href="#">
<img alt="" src="{{skin url=images/banners/123456.jpg}}" /><span class="info1">Passive acc</span>
</a>
</li>
</ul>
</div>
</div>
</div>
<div class="mainslice">
<a href="http:/