tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams 2013-02-26T23:28:31Z Web Design Galdorword, Website Designer Articles and Ideas. tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/732 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.98 2013-02-26T23:28:31Z 2013-02-26T23:28:31Z

Show, Hide, Expand, Collapse and Toggle functions with JQuery. Can I show hide or expand collapse a html element like a div with java script? Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse. The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us. Once jquery is uploaded set up your in-page html. The overall structure doesn't matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command. Show/Hide This will get shown/hidden depending on the toggle above. Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we're selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information. At this point you need to add the show hide toggle command. A.k.a the link that we've added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it's existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed. The last part of the script, the "400″ in your toggle function is the speed. You can either use a number, or use a word such as "slow", "fast", etc.. keep in mind though, when using words you do need to put them inside 'quotation marks' for it to register. The final script for a single instance along with JQuery gets put in the head of your document: $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); If you would like to have multiple instances on the same page click "continue reading" below and use the following code instead which uses siblings for multiple sliders on the same page. Continue reading... The below example uses "siblings" so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page. $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast'); return false; }); }); That's it! It's really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

Dylan Wagstaff http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/show_hide_expand_collapse_javascript.html#comment-637 commented on Show Hide Expand Collapse Javascript]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/725 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.98 2012-09-28T04:00:28Z 2012-09-28T04:00:28Z

Show, Hide, Expand, Collapse and Toggle functions with JQuery. Can I show hide or expand collapse a html element like a div with java script? Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse. The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us. Once jquery is uploaded set up your in-page html. The overall structure doesn't matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command. Show/Hide This will get shown/hidden depending on the toggle above. Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we're selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information. At this point you need to add the show hide toggle command. A.k.a the link that we've added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it's existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed. The last part of the script, the "400″ in your toggle function is the speed. You can either use a number, or use a word such as "slow", "fast", etc.. keep in mind though, when using words you do need to put them inside 'quotation marks' for it to register. The final script for a single instance along with JQuery gets put in the head of your document: $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); If you would like to have multiple instances on the same page click "continue reading" below and use the following code instead which uses siblings for multiple sliders on the same page. Continue reading... The below example uses "siblings" so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page. $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast'); return false; }); }); That's it! It's really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

davinci7 http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/show_hide_expand_collapse_javascript.html#comment-623 commented on Show Hide Expand Collapse Javascript]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/724 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.98 2012-09-28T03:59:56Z 2012-09-28T03:59:56Z

Show, Hide, Expand, Collapse and Toggle functions with JQuery. Can I show hide or expand collapse a html element like a div with java script? Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse. The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us. Once jquery is uploaded set up your in-page html. The overall structure doesn't matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command. Show/Hide This will get shown/hidden depending on the toggle above. Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we're selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information. At this point you need to add the show hide toggle command. A.k.a the link that we've added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it's existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed. The last part of the script, the "400″ in your toggle function is the speed. You can either use a number, or use a word such as "slow", "fast", etc.. keep in mind though, when using words you do need to put them inside 'quotation marks' for it to register. The final script for a single instance along with JQuery gets put in the head of your document: $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); If you would like to have multiple instances on the same page click "continue reading" below and use the following code instead which uses siblings for multiple sliders on the same page. Continue reading... The below example uses "siblings" so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page. $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast'); return false; }); }); That's it! It's really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

davinci7 http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/show_hide_expand_collapse_javascript.html#comment-622 commented on Show Hide Expand Collapse Javascript]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/723 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2012-09-27T21:52:07Z 2012-09-27T21:52:07Z

rachel xu http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-621 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/722 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-08-18T09:37:27Z 2012-08-18T09:37:27Z

polmajk http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-620 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/720 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-08-10T23:03:22Z 2012-08-10T23:03:22Z

Jon http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-618 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/719 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-08-02T18:26:36Z 2012-08-02T18:26:36Z

Ann F. http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-617 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/718 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-07-23T08:18:19Z 2012-07-23T08:18:19Z

nathan895 http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-616 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/717 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2012-06-27T08:29:01Z 2012-06-27T08:29:01Z

rafia http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-615 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/716 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-06-12T21:34:41Z 2012-06-12T21:34:41Z

Sherm http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-614 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/715 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-06-12T21:28:21Z 2012-06-12T21:28:21Z

Sherm http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-613 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/714 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-06-12T21:09:37Z 2012-06-12T21:09:37Z

Sherm http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-612 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/713 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-05-16T16:36:04Z 2012-05-16T16:36:04Z

studiod2 http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-611 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/712 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2012-04-02T22:43:15Z 2012-04-02T22:43:15Z

jastech29 http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-610 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/711 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2012-03-24T10:51:05Z 2012-03-24T10:51:05Z

PeterU http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-609 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/710 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-03-22T00:43:56Z 2012-03-22T00:43:56Z

lizc http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-608 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/709 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.98 2012-03-11T19:11:10Z 2012-03-11T19:11:10Z

Show, Hide, Expand, Collapse and Toggle functions with JQuery. Can I show hide or expand collapse a html element like a div with java script? Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse. The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us. Once jquery is uploaded set up your in-page html. The overall structure doesn't matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command. Show/Hide This will get shown/hidden depending on the toggle above. Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we're selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information. At this point you need to add the show hide toggle command. A.k.a the link that we've added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it's existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed. The last part of the script, the "400″ in your toggle function is the speed. You can either use a number, or use a word such as "slow", "fast", etc.. keep in mind though, when using words you do need to put them inside 'quotation marks' for it to register. The final script for a single instance along with JQuery gets put in the head of your document: $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); If you would like to have multiple instances on the same page click "continue reading" below and use the following code instead which uses siblings for multiple sliders on the same page. Continue reading... The below example uses "siblings" so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page. $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast'); return false; }); }); That's it! It's really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

i am r http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/show_hide_expand_collapse_javascript.html#comment-606 commented on Show Hide Expand Collapse Javascript]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/708 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2012-03-10T16:02:19Z 2012-03-10T16:02:19Z

PeterU http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-605 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/707 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2012-03-10T15:41:32Z 2012-03-10T15:41:32Z

PeterU http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-604 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/705 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.98 2012-02-10T21:54:25Z 2012-02-10T21:54:25Z

Show, Hide, Expand, Collapse and Toggle functions with JQuery. Can I show hide or expand collapse a html element like a div with java script? Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse. The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us. Once jquery is uploaded set up your in-page html. The overall structure doesn't matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command. Show/Hide This will get shown/hidden depending on the toggle above. Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we're selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information. At this point you need to add the show hide toggle command. A.k.a the link that we've added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it's existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed. The last part of the script, the "400″ in your toggle function is the speed. You can either use a number, or use a word such as "slow", "fast", etc.. keep in mind though, when using words you do need to put them inside 'quotation marks' for it to register. The final script for a single instance along with JQuery gets put in the head of your document: $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); If you would like to have multiple instances on the same page click "continue reading" below and use the following code instead which uses siblings for multiple sliders on the same page. Continue reading... The below example uses "siblings" so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page. $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast'); return false; }); }); That's it! It's really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

Flying Squash http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/show_hide_expand_collapse_javascript.html#comment-599 commented on Show Hide Expand Collapse Javascript]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/704 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-02-10T00:49:20Z 2012-02-10T00:49:20Z

Leslie http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-598 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/703 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-02-08T12:18:40Z 2012-02-08T12:18:40Z

Tracy http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-597 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/701 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-01-17T15:59:35Z 2012-01-17T15:59:35Z

Melificent http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-594 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/700 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-01-17T15:57:46Z 2012-01-17T15:57:46Z

Melificent http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-593 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/699 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-01-16T20:39:33Z 2012-01-16T20:39:33Z

Tané Tachyon http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-592 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/698 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-01-16T20:39:19Z 2012-01-16T20:39:19Z

Tané Tachyon http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-591 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/697 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-01-03T22:39:39Z 2012-01-03T22:39:39Z

Marc http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-590 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/696 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2012-01-03T21:56:56Z 2012-01-03T21:56:56Z

Marc http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-589 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/695 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-12-09T07:11:41Z 2011-12-09T07:11:41Z

babayard http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-585 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/694 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-11-21T22:42:40Z 2011-11-21T22:42:40Z

cgregory http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-584 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/693 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-11-21T22:42:10Z 2011-11-21T22:42:10Z

cgregory http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-583 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/692 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-11-21T22:41:41Z 2011-11-21T22:41:41Z

cgregory http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-582 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/691 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-11-21T00:34:55Z 2011-11-21T00:34:55Z

jamesvoce http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-581 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/690 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-11-17T19:38:47Z 2011-11-17T19:38:47Z

paco http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-580 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/689 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-11-17T19:38:15Z 2011-11-17T19:38:15Z

paco http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-579 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/687 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.98 2011-10-27T16:57:51Z 2011-10-27T16:57:51Z

Show, Hide, Expand, Collapse and Toggle functions with JQuery. Can I show hide or expand collapse a html element like a div with java script? Yes, this guide will allow you in just a few lines of code, to have a on click show hide content area that can expand and collapse. The first Step is to download JQuery and upload it to your server. One great thing about jQuery is the fact that it uses standard css styles which will make things really easy for us. Once jquery is uploaded set up your in-page html. The overall structure doesn't matter that much, just as long as you use unique classes so that JQuery knows what to show and hide on command. Show/Hide This will get shown/hidden depending on the toggle above. Expand collapse script summary: How it works. The show hide toggle on click function selects the html element that you initially want to have hidden, which will later be shown. In this case we're selecting a div tag that has the view class attached to it. Next you throw a hide() command at it, so that when the page loads we are initially hiding the view div information. At this point you need to add the show hide toggle command. A.k.a the link that we've added a slide class to, and watch it for clicks. Once someone clicks that link, we run a expand collapse toggle() function to show and hide the state of our view div. The toggle function is incredibly useful, as it constantly is aware of it's existing state and will alternate for us which saves us having to have any record of whether the item is already open or closed. The last part of the script, the "400″ in your toggle function is the speed. You can either use a number, or use a word such as "slow", "fast", etc.. keep in mind though, when using words you do need to put them inside 'quotation marks' for it to register. The final script for a single instance along with JQuery gets put in the head of your document: $(document).ready(function() { // Hide the "view" div. $('div.view').hide(); // Watch for clicks on the "slide" link. $('div.slide').click(function() { // When clicked, toggle the "view" div. $('div.view').slideToggle(400); return false; }); }); If you would like to have multiple instances on the same page click "continue reading" below and use the following code instead which uses siblings for multiple sliders on the same page. Continue reading... The below example uses "siblings" so we can have multiple .view and .slide divs that collapse and expand on the same page. The setup up is the same as above except for the use of the code below instead of the one listed above and the use of multiple .view .slide divs on the same page. $(document).ready(function() { $('div.view').hide(); $('div.slide').toggle(function() { $(this).siblings('div.view').fadeIn('slow'); }, function() { $(this).siblings('div.view').fadeOut('fast'); return false; }); }); That's it! It's really that simple, just add a few lines of code and you have an html element that can expand or collapse. You can use this javascript to show and hide paragraphs, individual links, images, or entire sections of your page.

snowmartin http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/show_hide_expand_collapse_javascript.html#comment-577 commented on Show Hide Expand Collapse Javascript]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/685 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-10-26T22:24:05Z 2011-10-26T22:24:05Z

Nathan http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-575 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/684 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-10-14T05:56:35Z 2011-10-14T05:56:35Z

samath http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-574 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/683 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-10-14T05:55:40Z 2011-10-14T05:55:40Z

samath http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-573 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/682 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-10-14T05:53:04Z 2011-10-14T05:53:04Z

samath http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-572 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/681 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-10-05T18:35:05Z 2011-10-05T18:35:05Z

Jorge http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-571 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/680 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2011-09-12T07:00:57Z 2011-09-12T07:00:57Z

Jay http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-568 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/679 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-09-10T22:20:37Z 2011-09-10T22:20:37Z

Jesse http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-565 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/678 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-09-10T20:03:43Z 2011-09-10T20:14:43Z

Dylan http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-562 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/676 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-09-08T19:58:51Z 2011-09-08T19:58:51Z

Dan http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-560 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/672 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-09-06T17:47:31Z 2011-09-06T17:47:31Z

Mark http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-556 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/671 tag:alohatechsupport.net,2009:/webdesignmaui//1.56 2011-09-05T06:39:58Z 2011-09-05T06:39:58Z

The Best Movable Type Blog Plugins What are the best plugins available for a Movable Type blog? First a few words about Movable Type. Movable Type blogs can offer maximum SEO potential for your blog entries. I have found that blog posts will normally appear ranked well in Google within a few days or so after being posting. However Search Engine Optimization or SEO for Movable Type will take some tweaking but the rewards are well worth the effort. One key factor is that MovableType can easily be configured to write seo friendly .html or non dynamic pages. Below I have listed a few of the best Movable Type plugins for MovableType. Continue reading... Hybrid Pagination plugin similar to MTPaginate offers support for paginating your Movable type blog, which relies on Movable Types dynamic publishing feature. LightBox for Movable Type picture plugin will add LightBox to your Movable Type blog by including a rel="ligthbox" tag automatically to your new images. Previous and next in category Movable Type plugin will add previous and next links to your blog categories. Image Gallery Plugin for Movable Type will help to create image picture galleries through cms. The Recent Image Plugin for Movable Type will allow you to include recent images easily in your blog templates. Sociotags is a plug-in for Movable Type 4 that adds a list of social bookmarks or "sociotags" to your blogs entries. Social tags are the little image bookmarks that you may have seen on various pages that let you add the page to social networks or promotional lists such as Digg, Technorati, Del.icio.us, Slashdot, etc. Mid-Century template set theme. The Mid Century Theme shows the amazing features found in Movable Type like AJAX commenting and search, auto complete, related entries, tag clouds, and more. Template set theme by Jim Ramsey. Movable Type Plugins can be easily installed by uploading them to appropriate plugin folders within your Movable Type installation directory. You can refer to individual plug-in installation guides usually found in each plugin download. View all Movable Type Plugins.

Web Design Cleveland http://www.alohatechsupport.net/webdesignmaui/hawaii-web-design/best_movable_type_plugins.html#comment-554 commented on Best Movable Type Plugins]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/669 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-09-02T20:21:18Z 2011-09-02T20:21:18Z

Mark http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-552 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/668 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-08-26T19:11:03Z 2011-08-26T19:11:03Z

Dylan http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-551 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/667 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-08-26T06:14:03Z 2011-08-26T06:14:03Z

anders http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-550 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/666 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-08-20T21:28:13Z 2011-08-20T21:28:13Z

Dylan http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-549 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/662 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2011-07-28T21:56:28Z 2011-07-28T21:56:28Z

Robin http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-545 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/661 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2011-07-28T21:55:13Z 2011-07-28T21:55:13Z

Robin http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-544 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/660 tag:alohatechsupport.net,2007:/webdesignmaui//1.50 2011-07-27T20:00:24Z 2011-07-27T20:00:24Z

Kristen http://www.alohatechsupport.net/webdesignmaui/maui-web-design-articles/layer_flash_under_html.html#comment-543 commented on Layer Flash Under HTML]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/659 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-07-26T21:12:31Z 2011-07-26T21:12:31Z

kcollins http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-542 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/658 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2011-07-23T20:26:48Z 2011-07-23T20:26:48Z

card http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-541 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/657 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-07-13T10:36:50Z 2011-07-13T10:36:50Z

Eli http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-540 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/656 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-07-13T10:36:20Z 2011-07-13T10:36:20Z

Eli http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-539 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/655 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-06-26T12:39:28Z 2011-06-26T12:39:28Z

dogboy http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-538 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/654 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-06-10T21:42:48Z 2011-06-10T21:42:48Z

Cheryl http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-537 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/653 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-06-10T21:42:17Z 2011-06-10T21:42:17Z

Cheryl http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-536 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/652 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-06-10T21:41:46Z 2011-06-10T21:41:46Z

Cheryl http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-535 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/650 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.101 2011-06-01T18:02:23Z 2011-06-01T18:02:23Z

sho http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/create_image_menu_with_jquery.html#comment-533 commented on Image Menu with Jquery]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/647 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-04-28T18:49:40Z 2011-04-28T18:49:40Z

LenP http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-530 commented on Easy Jquery Auto Image Rotator]]> tag:www.alohatechsupport.net,2013:/webdesignmaui/1/actionstreams/646 tag:www.alohatechsupport.net,2009:/webdesignmaui//1.169 2011-04-28T09:01:31Z 2011-04-28T09:01:31Z

Iain Young http://www.alohatechsupport.net/webdesignmaui/maui-web-site-design/easy_jquery_auto_image_rotator.html#comment-529 commented on Easy Jquery Auto Image Rotator]]>