Одновременно выводит несколько скрывающихся/появляющихся блоков. Я использовал при создании своей карты сайта.
// Andy Langton's show/hide/mini-accordion - updated 18/03/2009 // Latest version @ http://andylangton.co.uk/jquery-show-hide // this tells jquery to run the function below once the DOM is ready $(document).ready(function() { // choose text for the show/hide link - can contain HTML (e.g. an image) var showText='Show'; var hideText='Hide'; // append show/hide links to the element directly preceding the element with a class of "toggle" $('.toggle').prev().append(' (<a href="#">'+showText+'</a>)'); // hide all of the elements with a class of 'toggle' $('.toggle').hide(); // capture clicks on the toggle links $('a.toggleLink').click(function() { // change the link depending on whether the element is shown or hidden $(this).html ($(this).html()==hideText ? showText : hideText); // toggle the display - uncomment the next line for a basic "accordion" style //$('.toggle').hide();$('a.toggleLink').html(showText); $(this).parent().next('.toggle').toggle('slow'); // return false so any link destination is not followed return false; }); });
Section one: a div with a paragraph
You can show/hide an entire div by giving it a class of «toggle». Links and other child elements will work fine too. The element directly before this one is a heading, so it gets a show/hide link appended.
Section two: single paragraph
A single paragraph can be hidden by giving it a class of toggle too. I can’t help but be impressed by how easy it is to use jquery — even for someone with limited programming and javascript experience like me. Again, the preceding element is a heading.
Now: a list
- You can even hide a list
- Just give the <ul> the toggle class
- This time the preceding element is a paragraph
5 комментариев
Скрыть/показать несколько элементов – примеры jQuery…
Thank you for submitting this cool story — Trackback from progg.ru…
джейкувери отличная штука… пора даже поражает)
Спасибо, пригодится!
Силньая вещь, жаль времени выучить нету
[…] […]