Home › Forums › JavaScript › Collapse/Expand JS
- This topic is empty.
-
AuthorPosts
-
July 24, 2014 at 12:20 pm #176350Black MambaParticipant
I’m looking for a collapse/expand javascript that lets me control how much will be initially visible for each div.
I’ve found many that will hide content after a certain amount of characters, unfortunatly that won’t work for me as not all divs should be the same size when collapsed.
Basically I need to be able to control at what point it will collapse/expand. In some cases it will be after only a couple of lines, others after many paragraphs, and others won’t even consist of text at all…
JS is not my cup of tea. Any help will be highly appreciated.
Thanks.July 24, 2014 at 12:25 pm #176352Paulie_DMemberDo you mean like the jquery UI accordion?
July 24, 2014 at 12:45 pm #176354Black MambaParticipantNot really.
It’s a simple collapse/expand (show more/show less, +/-, whatever you wanna call it) jquery.
What makes it different is that every box will have a different size when collapsed. But I need the Expand (or read more or +) and collapse (read less or -) links at the bottom.Like I said, I need to control what’s initially visible individually.
July 24, 2014 at 1:01 pm #176356__ParticipantYou say controlling what’s visible by counting characters won’t work. How do you want to be able control it? word count? pixel dimensions? relative to child/sibling elements?
July 24, 2014 at 1:48 pm #176360Paulie_DMemberSounds like you would need to set each item’s height manually (unless there is some other criteria) and then animate to
height:auto
.CSS & JQ can’t do that animation natively but there are a few scripts/plug-ins around to do the animation for you.
July 25, 2014 at 1:42 am #176387Black MambaParticipant@un-traq-ed
I have to be able to set it up manually ’cause each case will be different. There’s no rule. One might have to be set up to show 1 image 400px high (while collapsed/closed) while another one could show only a couple lines of text and be just 40px high.Look at this example: http://i.imgur.com/nK2aNol.jpg
When clollapsed, the PROFILE box displays much more text than the TEAM box.
You can check the site here
This is exactly what I’m trying to achieve. (CONTINUE READING / READ LESS)
You know what? That might work! I’m gonna give it a try…
Thanks!August 9, 2014 at 12:27 pm #178411Black MambaParticipantI’ve tried a million different js and still haven’t got it working!
This is the starting point (collapsed)
This should be the end result (expanded)
The issue is that it’s gotta be controlled by the text at the bottom (that fades in as you hover over the image) and that’s what’s doing my head in!
The js Paulie_D recommended should work, and I believe this one should do as well… but I’m still struggling!
Can somebody give me a hand?
Thanks.August 10, 2014 at 2:47 am #178445Black MambaParticipantYeah, that’s pretty much it.
But would it be possible to have it roll up/down instead of fading in/out?Like what happens here with Continue reading/Read Less.
August 10, 2014 at 11:28 am #178469Black MambaParticipantCan I not copy/past the script for every box?
It might not be very efficient, but I’ll have 2 or 3 boxes at most, so I think I can get away with that… right?There’s an issue though. The black bar doesn’t line up at the bottom anymore.
Was it the script that screw it up? The CSS did not change…
August 10, 2014 at 11:54 am #178471Black MambaParticipantBrilliant! Exactly what I was looking for!
Yeah, that’s what I’m gonna do.
I’ll have only 2 or 3 boxes, so it’s no big deal…Thanks a lot!
August 11, 2014 at 2:39 am #178506Black MambaParticipantSoronbe, what do I have to change in the script if the content that’s hidden is text and not img? Do I have to control the height in CSS? I’ve tried it and it’s messing up with the black bar at the bottom… not lining up again…
Can you give me some insight on how to control the script when setting up a new box with a different size and contents?
Thx!
August 11, 2014 at 5:13 am #178520Black MambaParticipantWhat do you mean? Why would I need to change the selector? I just changed the content, swapping the image (the 2nd, the one that was hidden) for some text…
Now there’s a couple of other issues.
I linked two javascripts, one to set the box to a random position on load and another one to enable drag and drop and…
- Can’t drag by the expanded content… I don’t know why this happens because the drag property is set to the outer container (panel 6).
-
By simply linking those two javascripts the black bar stays with the 1st img, no longer moving to the bottom of the expanded content.
Any ideas?
August 11, 2014 at 6:20 am #178536Black MambaParticipantI haven’t noticed that…
So, I tried removing img and it did not work.
Should I replace it for something else if the content is text instead of an image?JSFiddle tells me:
document.write is disallowed in JSFiddle envioriment and might break your fiddle and it
and it doesn’t work.Codepen, also does not work. I have no idea why…
Want me to upload the whole thing somewhere else, so it’s easier for you to have a look?
Thx!
August 11, 2014 at 7:50 am #178546Black MambaParticipantAugust 12, 2014 at 4:52 am #178694Black MambaParticipantAny ideas?
-
AuthorPosts
- The forum ‘JavaScript’ is closed to new topics and replies.