Solved

How do I get accordian panel to show thumbnails?

Posted on 2013-01-20
10
268 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 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
Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

 
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

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

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?
Australian government abolished Visa 457 earlier this April and this article describes how this decision might affect Australian IT scene and IT experts.
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.
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

734 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