Unwanted Linebreaks W/O wpauto modification

Step 1: See if this issue has been addressed before in another thread.

Next:
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='https://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;
}

Hello, that only sort of works. But now when I click it and it expands, it still adds a linebreak, thus making a weird jump when you click the icon: https://tobylotak.com/testcast/

Also, in the thread you linked to, the person was asking about all the target content being in the same div, to which you replied “The only idea you might try, is to use the roll-your-own method and then group all the target divs together.” I’m not sure if this is what I’m trying to achieve too, but basically to have the target content appear in the same place. How do you group all the target divs together? I think right now, each target information (the profiles for each character) I am adding <div class=”collapseomatic_content” to each block of target content. Is this correct?

Thank you for all your direct help so far. I greatly appreciate it, and it’s well explained.

Yes, for your needs, you will want to use the roll-your-own method that is described in the documentation. This will allow you to place all your images in a nice row, and then after these… place your target content areas. Spend some time playing with the roll-your-own method and it should be quite easy.

Let us know if you get it working!

Yay thank you, I think I got it all up and running!

Great to hear! Don’t forget to vote for Pedro!