Скрыть/показать несколько элементов — примеры jQuery

Одновременно выводит несколько скрывающихся/появляющихся блоков. Я использовал при создании своей карты сайта.

// 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
  • Подсмотрел тут

    4.20 avg. rating (83% score) - 5 votes

5 комментариев

  • Скрыть/показать несколько элементов – примеры jQuery…

    Thank you for submitting this cool story — Trackback from progg.ru…

  • джейкувери отличная штука… пора даже поражает)

  • Спасибо, пригодится!

  • Силньая вещь, жаль времени выучить нету

  • […] […]

css.php