Web Analytics Made Easy -
StatCounter work samples with accordion behavior - CodingForum

Announcement

Collapse
No announcement yet.

work samples with accordion behavior

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • jQuery work samples with accordion behavior

    i'm trying to get my portfolio online and want to use an accordion-like behavior for my samples...

    here's my js:

    Code:
    <script type="text/javascript">
    	$(document).ready(function() {
    		$('.work').hide();
    		$('h3.heading').eq(3).addClass('active');
    		$('.work').eq(3).show();
    		
    		$('h3.heading').click(function(){
    			$('.work:visible').slideUp('slow');
    			$(this).next('.work').slideDown('3000');
    			$('li > h3.heading').removeClass('active');
    			$(this).toggleClass('active');
    		});
    	});
    </script>
    here's my html:

    Code:
    			<ul id="projects">
    				<li>
    					<h3 class="heading"><span>1 | </span>Company A</h3>
    					<div class="work">
    					<ul class="projHead">
    						<li class="number">1 |</li>
    						<li class="name"><h3>Company A</h3></li>
    						<li class="arrow"><!--spanner--></li>
    					</ul>
    					<div class="projContent">
    						<img src="projects/compA.jpg" width="528" height="260" alt="Utah Prenatal Massage" />
    						<p class="details">blah blah blah</p>
    					</div>
    					<ul class="projFoot">
    							<li><a>details</a></li>
    							<li class="last"><a>visit site</a></li>
    					</ul>
    					</div>
    				</li>
    </ul>
    i've got this all styled correctly, and it functions correctly if i include display:none; in the css; however, i'm wanting to go a more accessible route, and have attempted to use both .hide(); and .css('display', 'none'); in the js...but, while the content hides as intended, the space taken up by the content remains...any thoughts on how i can get rid of it?...

    also, i want the 'details' info to fadeIn and fadeOut on click and i'm unsure how to incorporate this action into the js...any ideas?
Working...
X