WordPress.org

Ready to get started?Download WordPress

Forums

Collapse-O-Matic
[resolved] Different images in title line instead of text (12 posts)

  1. pistoling
    Member
    Posted 1 year ago #

    Hello! I'm looking to replace the title line text with different images - is this possible? So I'd have say 6 images on my page that would each expand to reveal different information. Hopefully it can be done and very good plugin regardless. Thanks.

    http://wordpress.org/extend/plugins/jquery-collapse-o-matic/

  2. pistoling
    Member
    Posted 1 year ago #

    6 different images that is. Thanks.

  3. Baden
    Member
    Plugin Author

    Posted 1 year ago #

    Yes, it's possible. Couple of questions.
    1. have you checked out the documentation?
    2. how confortable are you with css?

    Ok, and a third:
    Can you share a link to the page you are working on?

  4. pistoling
    Member
    Posted 1 year ago #

    Hi Baden.

    1. Yup. Done a bit of tweaking already.
    2. Comfortable enough so far! Fire away...
    3. Can't I'm afraid - got an "under construction" plugin on that I can't remove just yet.

    Thanks.

  5. kellyrnh
    Member
    Posted 1 year ago #

    I'm really looking forward to your solution for this as well. Thanks!

  6. Baden
    Member
    Plugin Author

    Posted 1 year ago #

    Here is a little step-by-step of what you need to do to get image trigger elements to line up:
    Step One
    Create each expand element using the title element as the image tag. Assign it a trigclass="noarrow" and give it an alt attribute that makes sense:

    [expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" alt="turtles one"]This is the content of the first image[/expand]

    Step Two
    Wrap each expand element in a div with a unique class. We used 'birdwire' because it makes all the images nice and need in a row like... birds on a wire! Hmmm, maybe we should have used ducksrow. Anyway, each element will now look like so:

    <div class="birdwire">[expand title="<img src='http://example.com/image.jpg' />" trigclass="noarrow" alt="turtles one"]This is the content of the first image[/expand]<div>

    Final Step
    Add the following to your theme's style.css:

    .birdwire {
            display: inline;
            float: left;
            margin-right: 1.625em;
            width: 160px;
    }

    And Blam-O! The images line up and float left.
    Here is little woking example for you to check out: http://spacedonkey.de/623/collapse-o-matic-line-of-trigger-images/

    Let us know if you get it working!

  7. kellyrnh
    Member
    Posted 1 year ago #

    Thanks! That is really close to what I'm looking to do, but I need each trigger image to load the content in the same div below (not one div under each image). Is this possible? I'm trying to load full width slideshows with these icon triggers.

    Thanks!!!

  8. kellyrnh
    Member
    Posted 1 year ago #

    Also, can the trigger icon hide the other content (since I don't want overlapping in the target content area)

    Thanks again!

  9. Baden
    Member
    Plugin Author

    Posted 1 year ago #

    Check out 'highlander grouping' in the documentation

  10. kellyrnh
    Member
    Posted 1 year ago #

    Oh right, that will definitely solve the hiding the open when clicking a new. Thanks! Any thoughts on having it show the target content in the same div?

  11. Baden
    Member
    Plugin Author

    Posted 1 year ago #

    That's not really the way this plugin works. The only idea you might try, is to use the roll-your-own method and then group all the target divs together. Then assign the snap-shut class to all triggers.

    This will snap each open element shut when it collapses, and then the new element will expand gracefully. If that makes any sense.

    Best of luck!

  12. pistoling
    Member
    Posted 1 year ago #

    Brilliant - thanks heaps.

Topic Closed

This topic has been closed to new replies.

About this Plugin

About this Topic