I'm working on the UI/UX for a listing/index landing page for audio files and using jQuery accordion to deal with what will eventually be an index of nearly 2000 titles or more spanning from 1958 to 2014.
the top level headers are by year that the audio files were posted, these are the Accordion disclosure selectors.
I am not able to get the disclosure triangles
# pointing down if the div is open and visible
# pointing to the right when the div is collapsed by default
to align to the left of the header element.
Note that I'm not loading any jQuery UI scripts or UI CSS... which may be my problem, We don't use it that much so I'm thinking to keep the weight of the page down to just add just enough CSS to do the job.. but I'm missing something. even minified the ui is over 200k of js.
For now I'm running the styles in line for testing purposes...and to make sure I override the main styles.js for the site. later I'll put the css into the main style sheet.
Aside from the solution needed to get the triangle over to the left of the H3 element, I'll be all ears for any thoughts you have on the UX... I decided to avoid JS for the disclosure of the description of the audio file... and went with css-hover... as I'm not sure forcing users to click on a "More.." button to hide and show that div is any better than hover; and hover works with touch on smart phones... so seems like as good a UX as using JS to do the job... It also makes it simpler for me to generate the lists from the database later on, because I won't have to dynamically apply unique div ID's throughout the index which I think would be required to make the JS work using a button onclick trigger. OTHO if you have a better idea then I'm all ears... I should probably make that a separate question once I get the triangle position solved.