[Plugin: jQuery Collapse-O-Matic] Content text display next to title?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Marventus

    (@marventus)

    11 years, 9 months ago

    Hi Marisa,

    Could you please share a link to your site? It is really difficult to point you to the right solution otherwise.

    Thanks!

    Thread Starter Marisa

    (@marisaprefergmailcom)

    11 years, 9 months ago

    The site is not currently live… I can show you the source code if that helps… 

    <section class="post_content clearfix" itemprop="articleBody">
							<div><span class='collapseomatic noarrow' id='id938' rel="animal-highlander" title="projects">projects</span>
<div id='target-id938' class='collapseomatic_content '><br />
<img class="mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/moon.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/mot.jpg" />          <img class="mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/time.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/lux.jpg" />           <img class="mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/tree.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/tp.jpg" />          <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/other.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/add.jpg" /></div>
</div>
<div><span class='collapseomatic noarrow' id='id8863' rel="animal-highlander" title="co-labs">co-labs</span>
<div id='target-id8863' class='collapseomatic_content '><span style="color: #ff9900;">COLLABORATIVE PROJECTS. EXPERIENCES. EXPERIMENTS…</span><br />
<img class="mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/ct-300x300.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/ct.jpg" />                <a href="http://christinaseely.com/wordpress/collaborations/unknown-fields-division/"><img class="mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/ufd-300x300.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/ufd.jpg" /></a>                <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/acpp.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/acp.jpg" />                <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/canary-300x300.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/cp.jpg" /></div>
<br />
<span class='collapseomatic noarrow' id='id8947' rel="animal-highlander" title="auxiliary">auxiliary</span>
<div id='target-id8947' class='collapseomatic_content '><span style="color: #ff9900;">BLOG. BOOKS. WRITINGS. LINKS/THANKS</span><br />
        <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/writings.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/writings_r.jpg" />        <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/03/lux.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/books_r.jpg" />        <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/thankyou.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/links_r.jpg" />        <img class=" mouseover alignnone  wp-image-195" src="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/metronaturee.jpg" alt="" width="168" height="168" data-oversrc="http://christinaseely.com/wordpress/wp-content/uploads/2012/06/metronature_r.jpg" /><br />
</div>
    Plugin Author Baden

    (@baden03)

    11 years, 9 months ago

    Marisa,

    First, it might be best to start by rolling your own collapse elements. Read up on that in the documentation. Once you get the structure down, you can use the tag, trigclass and targclass attributes with the shortcode, if you want.

    Next, create structure using two divs w/o any of the collapse-o-matic features. this will be done by creating your CSS and assigning the classes to both left and right divs.

    Finally, apply the collapse-o-matic IDs and classes, so it should look something like this:

    <div class='left collapseomatic noarrow' id='id8863' rel="animal-highlander">co-labs</div>
<div id='target-id8863' class='right collapseomatic_content '>co-labs content</div>

    Best of luck!

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘[Plugin: jQuery Collapse-O-Matic] Content text display next to title?’ is closed to new replies.