Solved

How do I get accordian panel to show thumbnails?

Posted on 2013-01-20
10
266 Views
Last Modified: 2013-01-21
I am not doing so well with my jQuery.  I have a working example here.

Most of my code came from this tutorial:

How can I fix it so when the panels shorten, under Photos, the photo remains, but shrinks into a thumbnail, as well as the video?  And the words under Posts fit into the panel, with no change of font.  Basically, I want to see what is under every category and it just get larger or smaller when clicked, instead of disappearing out of view.

Is this possible, and if so, can someone help me?

Thank you in advance for any help!
0
Comment
Question by:happysunny
  • 5
  • 5
10 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 38801741
Hi,

You can do this much more simply with just CSS3. It won't animate in IE <10 though.
http://candpgeneration.com/EE/infogrid/index.html

What browsers are you planning on supporting? If you like the way this behaves I could add the some js to make it animate in IE.
0
 
LVL 4

Author Comment

by:happysunny
ID: 38801821
Thank you so much for responding.  CSS3 never ceases to amaze!  I'd like to support as many browsers as I can, including IE if that is possible.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38801908
ok, I'll add some javascript for browsers that don't support CSS3 transitions.

in the meantime though, you will make your life easier for other aspects too if you decide which versions of IE (and what devices, etc...) to support, most people go with 8 and up these days.
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38802094
Ok, go to that link again. It should work in IE now.
0
 
LVL 4

Author Comment

by:happysunny
ID: 38802113
Thank you for advice.  This is for a client, and it's been a bit unclear of versions and devices.  If I were to ask him, he'd probably say he wants it to be used on all devices and all IE versions, so I should already have this thought out.  He particularly loves using AOL for everything, which uses the terrible modified version of IE. Arg!
0
 
LVL 4

Author Comment

by:happysunny
ID: 38802130
Is there a way to have everything in each panel in view?  Instead of sliding to show only one picture or post or video?  What are the pros and cons of doing that?
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38802148
what's there now should work pretty consistently across most browsers. If you see something in a particular browser that is not working let me know.
0
 
LVL 4

Author Comment

by:happysunny
ID: 38802149
Nevermind, that was a dumb question; It was changing the class "infoCol".  This is fantastic!  Thank you so much for your help!!!
0
 
LVL 4

Author Closing Comment

by:happysunny
ID: 38802152
You are brilliant!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38802176
:)
0

Featured Post

3 Use Cases for Connected Systems

Our Dev teams are like yours. They’re continually cranking out code for new features/bugs fixes, testing, deploying, testing some more, responding to production monitoring events and more. It’s complex. So, we thought you’d like to see what’s working for us.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Although it can be difficult to imagine, someday your child will have a career of his or her own. He or she will likely start a family, buy a home and start having their own children. So, while being a kid is still extremely important, it’s also …
Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

777 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question