Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums JavaScript Collapse/Expand JS

  • This topic is empty.
Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #176350
    Black Mamba
    Participant

    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.

    #176352
    Paulie_D
    Member

    Do you mean like the jquery UI accordion?

    http://jqueryui.com/accordion/#no-auto-height

    #176354
    Black Mamba
    Participant

    Not 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.

    #176356
    __
    Participant

    You 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?

    #176360
    Paulie_D
    Member

    Sounds 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.

    https://github.com/davidtheclark/jquery.cssAnimateAuto

    #176387
    Black Mamba
    Participant

    @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)


    @Paulie_D

    You know what? That might work! I’m gonna give it a try…
    Thanks!

    #178411
    Black Mamba
    Participant

    I’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.

    #178445
    Black Mamba
    Participant

    Yeah, 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.

    #178469
    Black Mamba
    Participant

    Can 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…

    #178471
    Black Mamba
    Participant

    Brilliant! 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!

    #178506
    Black Mamba
    Participant

    Soronbe, 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!

    #178520
    Black Mamba
    Participant

    What 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…

    1. 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).
    2. 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?

    set Random Position
    DragDrop

    #178536
    Black Mamba
    Participant

    I 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!

    #178546
    Black Mamba
    Participant
    #178694
    Black Mamba
    Participant

    Any ideas?

Viewing 15 posts - 1 through 15 (of 26 total)
  • The forum ‘JavaScript’ is closed to new topics and replies.