In this toggle the Video webpart and Sliding webpart in sharepoint using the simple jquery.
1)First add the two webparts in sharepoint site and save it.
2)And than go to the SP designer.
3)Open the Particular Page and find the webpart(Video webpart and Sliding webpart) place.its like below
4)And arranged the with in the <td> tag.(img below)
5)After that create a hyper links on top of div tag.
6)Add the jquery coding on the bottom of the page and also refer the jquery-1.4.1.js.
<script type="text/javascript">
$(document).ready(function () {
$('#slide_toggle').hide();
});
$(function () {
$('#slide_toggle').click(function () {
$('#slideWebpart').toggle();
$('#videoWebpart').hide();
$('#slide_toggle').hide();
$('#video_toggle').show();
});
});
$(function () {
$('#video_toggle').click(function () {
$('#videoWebpart').toggle();
$('#slideWebpart').hide();
$('#video_toggle').hide();
$('#slide_toggle').show();
});
});
</script>
1)First add the two webparts in sharepoint site and save it.
2)And than go to the SP designer.
3)Open the Particular Page and find the webpart(Video webpart and Sliding webpart) place.its like below
4)And arranged the with in the <td> tag.(img below)
5)After that create a hyper links on top of div tag.
6)Add the jquery coding on the bottom of the page and also refer the jquery-1.4.1.js.
<script type="text/javascript">
$(document).ready(function () {
$('#slide_toggle').hide();
});
$(function () {
$('#slide_toggle').click(function () {
$('#slideWebpart').toggle();
$('#videoWebpart').hide();
$('#slide_toggle').hide();
$('#video_toggle').show();
});
});
$(function () {
$('#video_toggle').click(function () {
$('#videoWebpart').toggle();
$('#slideWebpart').hide();
$('#video_toggle').hide();
$('#slide_toggle').show();
});
});
</script>
6)finally save the page and see the output.
No comments:
Post a Comment