Forums

louckster

So I'm using the Animated Collapsible DIV v2.2 by Dynamic Drive. It works for the most part except when I want an area to collapse back up.

I'm using a div called:

<div id=\"portfolio-display\">

but for the script you need to use another div for each section you want. For me they would be ...

<div id=\"graphic\">

<identity\">

I've only changed the GRAPHIC area to reflect the portfolio-display effect. Has you see the other sections work fine. So it has to do with something with the other div. Here is my code.

PAGE:

<p>First, welcome and thank you for taking a look at my portfolio. To view my work under a category (graphic art, identity, etc.) click on the <em>Display/Hide Work</em> link. This will show the works in that particular category. For a larger and more detailed view click on the preview. Once finished click the <em>close button</em> to view all the works again. Hitting the Display/Hide Work again will hide works in the category you were viewing.</p>

<h2>Graphic Art</h2>
<p>
<strong>Total Pieces:</strong> 7<br />
<strong>Last Updated:</strong> 03/12/2009<br />
<a href=\"javascript:animatedcollapse.toggle('graphic')\">&ndash; Display/Hide Work</a>
</p>
<div id=\"portfolio-display\">
<div id=\"graphic\">
<ul>
<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-dancing-soundtrack.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-dancing-soundtrack.jpg\" alt=\"Dirty Dancing Soundtrack (iTunes Art)\" class=\"portfolio\" /></a></li>

<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-debbie-great.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-debbie-great.jpg\" alt=\"Debbie Gibson Greatest Hits (iTunes Art)\" class=\"portfolio\" /></a></li>

<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-rangers-movie.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-rangers-movie.jpg\" alt=\"MMPR: The Movie Soundtrack (iTunes Art)\" class=\"portfolio\" /></a></li>

<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-britney-miami.jpg\" rel=\"lightbox\" class=\"portfolio\" />
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-britney-miami.jpg\" alt=\"Britney Spears Dream Within A Dream CD (iTunes Art)\" class=\"portfolio\" /></a></li>

<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-britney-dream.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-britney-dream.jpg\" alt=\"Britney Spears Live from Miami CD (iTunes Art)\" class=\"portfolio\" /></a></li>

<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-britney-oops.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-britney-oops.jpg\" alt=\"Britney Spears Oops! ... I Did It Again Tour CD (iTunes Art)\" class=\"portfolio\" /></a></li>

<li><a href=\"http://onyx.jason-loucks.com/images-portfolio/graphic-jo-relentless.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/graphic-jo-relentless.jpg\" alt=\"Jo O'Meara: Relentless (iTunes Art)\" class=\"portfolio\" /></a></li>
</ul>
</div>
</div>

<img src=\"http://onyx.jason-loucks.com/images-theme/portfolio-divider.gif\" alt=\"Portfolio Divider\" class=\"divider-img\" />

<h2>Identity</h2>

<p>
<strong>Total Pieces:</strong> 3<br />
<strong>Last Updated:</strong> 03/12/2009<br />
<a href=\"javascript:animatedcollapse.toggle('identity')\">&ndash; Display/Hide Work</a>
</p>

<div id=\"identity\">

<a href=\"http://onyx.jason-loucks.com/images-portfolio/identity-purple-moon.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/identity-purple-moon.jpg\" alt=\"Purple Moon Resturant &amp; Bar Logo\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.comt/images-portfolio/identity-nombuso-gallery.jpg\" rel=\"lightbox\" >
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/identity-nombuso-gallery.jpg\" alt=\"The Nombuso Gallery Logo\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/identity-loucks-design.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/identity-loucks-design.jpg\" alt=\"Loucks Design Logo\" class=\"portfolio\" /></a>

</div><!-- END identity -->

<img src=\"http://onyx.jason-loucks.com/images-theme/portfolio-divider.gif\" alt=\"Portfolio Divider\" class=\"divider-img\" />


<h2>Packaging</h2>

<p>
<strong>Total Pieces:</strong> 1<br />
<strong>Last Updated:</strong> 03/12/2009<br />
<a href=\"javascript:animatedcollapse.toggle('packaging')\">&ndash; Display/Hide Work</a>
</p>


<div id=\"packaging\">

<a href=\"http://onyx.jason-loucks.com/images-portfolio/package-photoshop-cs4.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/package-photoshop-cs4.jpg\" alt=\"Adobe Photoshop CS4 Extended Packaging\" class=\"portfolio\" /></a>

</div> <!-- END packaging -->

<img src=\"http://onyx.jason-loucks.com/images-theme/portfolio-divider.gif\" alt=\"Portfolio Divider\" class=\"divider-img\" />

<h2>Printed Media</h2>

<p>
<strong>Total Pieces:</strong> 11<br />
<strong>Last Updated:</strong> 03/24/2009<br />
<a href=\"javascript:animatedcollapse.toggle('printed')\">&ndash; Display/Hide Work</a>
</p>

<div id=\"printed\">

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-britney-live.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-britney-live.jpg\" alt=\"B. Spears Live from Miami DVD Artwork\" class=\"portfolio\" /></a>  
          	            
<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-walk-remember.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-walk-remember.jpg\" alt=\"A Walk To Remember DVD Artwork\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-best-mandy.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-best-mandy.jpg\" alt=\"Mandy Moore The Best Of DVD Artwork\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-soundloaded-concert.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-soundloaded-concert.jpg\" alt=\"The Soundloaded Concert Poster\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-verve-records.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-verve-records.jpg\" alt=\"Verve Records Album Covers\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-ipod-classic.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-ipod-classic.jpg\" alt=\"Nombuso Gallery Catalog \" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-purple-moon-menu.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-purple-moon-menu.jpg\" alt=\"Purple Moon Restuarnt &amp; Bar\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-nombuso-catalog.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-nombuso-catalog.jpg\" alt=\"Nombuso Gallery Catalog\" class=\"portfolio\" /></a>


<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-xmen-cyclops.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-xmen-cyclops.jpg\" alt=\"Xmen Origins: Cycolpos Movie Poster\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-xmen-storm.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-xmen-storm.jpg\" alt=\"Xmen Origins: Storm Movie Poster\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/print-xmen-beast.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/print-xmen-beast.jpg\" alt=\"Xmen Origins: Beast Movie Poster\" class=\"portfolio\" /></a>

</div><!-- END printed -->

<img src=\"http://onyx.jason-loucks.com/images-theme/portfolio-divider.gif\" alt=\"Portfolio Divider\" class=\"divider-img\" />

<h2>Vector Illustration</h2>

<p>
<strong>Total Pieces:</strong> 0<br />
<strong>Last Updated:</strong> --/--/----<br />
<a href=\"javascript:animatedcollapse.toggle('vector')\">&ndash; Display/Hide Work</a>
</p>

<img src=\"http://onyx.jason-loucks.com/images-theme/portfolio-divider.gif\" alt=\"Portfolio Divider\" class=\"divider-img\" />


<h2>Website Design</h2>

<p>
<strong>Total Pieces:</strong> 2<br />
<strong>Last Updated:</strong> 03/12/2009<br />
<a href=\"javascript:animatedcollapse.toggle('web')\">&ndash; Display/Hide Work</a>
</p>

<div id=\"web\">

<a href=\"http://onyx.jason-loucks.com/images-portfolio/web-refinery-salon.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/web-refinery-salon.jpg\" alt=\"Purple Moon Restuarnt &amp; Bar\" class=\"portfolio\" /></a>

<a href=\"http://onyx.jason-loucks.com/images-portfolio/web-aftermagic-game.jpg\" rel=\"lightbox\">
<img src=\"http://onyx.jason-loucks.com/images-portfolio/previews/web-aftermagic-game.jpg\" alt=\"Purple Moon Restuarnt &amp; Bar\" class=\"portfolio\" /></a>

</div><!-- END web -->

CSS:

#portfolio-display ul
        {
        	margin:0px;
         	padding:0px;
        }
        #portfolio-display li
        {
        	list-style-type:none;
        	float:left;
        	margin: 0 10px 10px 0;
        	position:relative;
        	padding:0px;
        }
        #portfolio-display li img
        {
        	border: 4px solid #fff;
width: 170px;
        }
        #portfolio-display li a
        {
        	display:block;
        }

Here is a LIVE link of what it looks like http://jason-loucks.com/wptest/portfolio/ - any ideas what is causing this? Like I said I think it has to do with the portfolio-display.

apostrophe

Try changing the javascript for the #graphic div to

animatedcollapse.addDiv('graphic', 'height=440px')

louckster

"apostrophe" said:
Try changing the javascript for the #graphic div to
animatedcollapse.addDiv('graphic', 'height=440px')

Thank you so much! Would you mind explaining how that works? Trying to learn at that same time. Thanks again. :D

apostrophe

The truth? I have no idea. :oops:

I looked at your code, couldn't see anything obviously wrong (except it didn't work) so I had a look on the Dynamic drive site to see what parameters were available, height seemed most likely so I measured the div and added that to the jQuery.

louckster

"apostrophe" said:
The truth? I have no idea. :oops:

I looked at your code, couldn't see anything obviously wrong (except it didn't work) so I had a look on the Dynamic drive site to see what parameters were available, height seemed most likely so I measured the div and added that to the jQuery.

Haha. Thanks, but I still want the content to hide when you first arrive.

treehouse : what would you like to learn today?

Forums

A Little Bit of Issues