Demand a accordion on jquery v1.4.3

JavaScript
1

I want to install the site on a simple accordion jquery * jQuery JavaScript Library v1.4.3, I hooked this library already.
Html I have compiled a list of ul. I can it be framed in the div with the id=“accordion-on-site”

<div id="accordion-on-site">
	<ul class="search-results">
  <li class="search-entry">
      <a class="results-title" href="#"><strong>Text title</stron></a>
    <div class="search-entry-excerpt">
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
	</div>
  </li>
  <li class="search-entry">
      <a class="results-title" href="#"><strong>Text title</stron></a>
    <div class="search-entry-excerpt">
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
	</div>
  </li>
  <li class="search-entry">
      <a class="results-title" href="#"><strong>Text title</stron></a>
    <div class="search-entry-excerpt">
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
	</div>
  </li>
</ul>
</div>
2

Accordion works, but when you open a tab, the previous is not closed
html

<div id="accordion-on-site">
	<ul class="search-results">
  <li class="search-entry">
      <a class="results-title" href="#"><strong>Text title</stron></a>
    <div class="search-entry-excerpt">
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
	</div>
  </li>
  <li class="search-entry">
<h3>
      <a class="results-title" href="#"><strong>Text title</stron></a></h3>
    <div class="search-entry-excerpt">
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
	</div>
  </li>
  <li class="search-entry">
      <a class="results-title" href="#"><strong>Text title</stron></a>
    <div class="search-entry-excerpt">
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
		<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
	</div>
  </li>
</ul>
</div>

jquery

///DOC READY FUNCTIONS
jQuery( document ).ready(function( $ ) {

    if ( jQuery( '.search-results' )[0] ){

        jQuery( '.search-results' ).find( 'h3' ).click( function( e ){ //Click function to toggle extending lists

            e.preventDefault();

            jQuery( this ).next().slideToggle( 'fast' ).css( 'zoom', '1' ); //Find the next element after the clicked element
            jQuery( this ).parent( 'li' ).toggleClass( 'collapse' ); //Add a class for styling

        } );

        jQuery( '.search-results > li search-entry-excerpt' ).each( function( $ ){ //Function initially hide lists with the override class of "extended"

            if ( !jQuery( this ).hasClass( 'extended' ) ){

                jQuery( this ).find( 'ul' ).slideUp( 'fast' ).css( 'zoom', '1' ); //hide all lists without a parent of "extended"
                jQuery( this ).toggleClass( 'collapse' ); //Add a class for styling

            }

        } );


    }

} );

CSS

.search-entry-excerpt {
	display: none;}
3

Hi,

This could probably be tidied up a lot but this should work.


<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
<div id="accordion-on-site">
		<ul class="search-results">
				<li class="search-entry">
						<h3> <a class="results-title" href="#"><strong>Text title </strong> </a></h3>
						<div class="search-entry-excerpt">
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
						</div>
				</li>
				<li class="search-entry">
						<h3> <a class="results-title" href="#"><strong>Text title </strong> </a></h3>
						<div class="search-entry-excerpt">
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
						</div>
				</li>
				<li class="search-entry">
						<h3> <a class="results-title" href="#"><strong>Text title </strong> </a></h3>
						<div class="search-entry-excerpt">
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
								<p>text text text tex text text tex text text tex text text tex text text tex text text tex text text tex</p>
						</div>
				</li>
		</ul>
</div>
<script>
///DOC READY FUNCTIONS
jQuery(document).ready(function ($) {

    if (jQuery('.search-results')[0]) {
        jQuery('.search-results').find('h3').click(function (e) { //Click function to toggle extending lists
            e.preventDefault();
            var thisOne = jQuery(this).next(); //Find the next element after the clicked element 
            jQuery('.search-entry-excerpt').not(thisOne).slideUp('fast').parent('li').addClass('collapse'); //slide up all except this one
            thisOne.slideToggle('fast'); // just toggle this one             
            jQuery(this).parent('li').toggleClass('collapse'); //Add a class to parent for styling
        });

        jQuery('.search-results .search-entry-excerpt').each(function ($) { //Function initially hide lists with the override class of "extended"

            if (!jQuery(this).hasClass('extended')) {
                jQuery(this).hide(); //hide all lists without a parent of "extended"
                jQuery(this).parent('li').toggleClass('collapse'); //Add a class to parent for styling
            }

        });

    }

});
</script>
</body>
</html>

Note in your example you missed out the h3 in some examples and you didn’t close the strong elements properly.

4

Thank you very much, now works fine, but the speed folding tabs is very large, as can be squeezed down to slower to visually effect was better?

5

Hi,

I’m not sure what you are asking exactly but you can change the speed of the slide by changing ‘fast’ to ‘slow’ or by specifying in milliseconds as documented here.

I always find those jQuery animations a little jerky at the best of times.

6

Thank you very well, now slowly opened tabs