More Triggers in one row

Resolved VanW
(@vanw)

10 years, 4 months ago

Hello,
is there a way to achive state when two or more triggers (images preferably) sits in one row?

Kind of http://plugins.twinpictures.de/plugins/collapse-o-matic/documentation/#tag – the “Rel Attribute” section.

In best case scenario, imagine three images next to each other when each expands different text. (ALSO if the text can stretch bellow all three images).

I’m not sure if this is clear, however I’d be happy to clarify some more.

Thanks for any response

Van

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

Viewing 9 replies - 1 through 9 (of 9 total)

Plugin Author Baden
(@baden03)

10 years, 4 months ago

You mean something like this: http://spacedonkey.de/623/collapse-o-matic-line-of-trigger-images/

Thread Starter VanW
(@vanw)

10 years, 4 months ago

At first, thank you for you reply.
Iťs almost done. The images are now inline as desired. However the text is only collapsing under the image (trigger), can I somehow resize the area so that the text is expanding underneath all three images?

http://amires.bumblebeestudio.eu/test_title/

Used code:
<div class=”birdwire”>[expand title=”<img src=’http://amires.bumblebeestudio.eu/images/redbox.jpg’ />” alt=”Red Box” trigclass=”noarrow” rel=”animal-highlander” ]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pibendum sodales, augue velit cursus nunc,[/expand]</div>

<div class=”birdwire”>[expand title=”<img src=’http://amires.bumblebeestudio.eu/images/redbox.jpg’ />” alt=”Red Box” trigclass=”noarrow” rel=”animal-highlander”]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretiumget bibendum sodales, augue velit cursus nunc,[/expand]</div>

<div class=”birdwire”>[expand title=”<img src=’http://amires.bumblebeestudio.eu/images/redbox.jpg’ />” alt=”Red Box” trigclass=”noarrow” rel=”animal-highlander”]Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felimauris sit amet nibh. Donec sodales sagittis magna. Sed consequat, leo eget bibendum sodales, augue velit cursus nunc,[/expand]</div>

<div style=”clear: both”> </div>

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

Thank you very much for your time.

Van

Thread Starter VanW
(@vanw)

10 years, 4 months ago

changed the link from http://amires.bumblebeestudio.eu/test_title/ to http://amires.bumblebeestudio.eu/tt

Thank you

VanW
Plugin Author Baden
(@baden03)

10 years, 4 months ago
OK, in this case you It’s recommend you use the roll-your-own method described in the documentation.

Here is an example of how you might do that:
```
//triggers
<div class="collapseomatic noarrow birdwire" id="redbox" rel="box-highlander" alt="Red Box"><img src='http://amires.bumblebeestudio.eu/images/redbox.jpg' /></div>
<div class="collapseomatic noarrow birdwire" id="bluebox" rel="box-highlander" alt="Blue Box"><img src='http://amires.bumblebeestudio.eu/images/bluebox.jpg' /></div>

//targets
<div id="target-redbox" class="collapseomatic_content">Lorem ipsum dolor sit amet.</div>
<div id="target-bluebox" class="collapseomatic_content">Aenean massa. Cum sociis natoque penatibus et magnis</div>
```
Thread Starter VanW
(@vanw)

10 years, 4 months ago

Perfect

Thank you very much.

Going for pro version.

Great plugin… and great support

VanW

Plugin Author Baden
(@baden03)

10 years, 4 months ago

Sweet! Don’t for get to tell your friends and vote for pedro!

lena_k198
(@lena_k198)

10 years, 4 months ago

I have a similar question:
Here is the sample link: http://stargfx.net/peaceandclean.com/services/

if you scroll down you will see three grey tabs. How can I expand one on load? and also how can I make sure that div doesnt affect other sections of the site. Not when you klick on one of the tabs footer shifts.

Thanks!!

esmi
(@esmi)

10 years, 4 months ago

@lena_k198: If you require assistance then, as per the Forum Welcome, please post your own topic.

Plugin Author Baden
(@baden03)

10 years, 4 months ago

lena, your issue is being address in this tread. Thanks.