Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

How do I get accordian panel to show thumbnails?

Posted on 2013-01-20
10
Medium Priority
?
272 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
10 Comments
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 2000 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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

When crafting your “Why Us” page, there are a plethora of pitfalls to avoid. Follow these five tips, and you’ll be well on your way to creating an effective page.
When the s#!t hits the fan, you don’t have time to look up who’s on call, draft emails, call collaborators, or send text messages. An instant chat window is definitely the way to go, especially one like HipChat. HipChat is a true business app. An…
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
This video teaches users how to migrate an existing Wordpress website to a new domain.
Suggested Courses

618 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