?
Solved

How do I get accordian panel to show thumbnails?

Posted on 2013-01-20
10
Medium Priority
?
274 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 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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
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

Vote for the Most Valuable Expert

It’s time to recognize experts that go above and beyond with helpful solutions and engagement on site. Choose from the top experts in the Hall of Fame or on the right rail of your favorite topic page. Look for the blue “Nominate” button on their profile to vote.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
This tutorial demonstrates how to identify and create boundary or building outlines in Google Maps. In this example, I outline the boundaries of an enclosed skatepark within a community park.  Login to your Google Account, then  Google for "Google M…
The viewer will get a basic understanding of what section 508 compliance can entail, learn about skip navigation links, alt text, transcripts, and font size controls.
Suggested Courses
Course of the Month15 days, 17 hours left to enroll

850 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