WordPress.org

Forums

Collapse-O-Matic
[resolved] Content text display next to title? (4 posts)

  1. Marisa
    Member
    Posted 4 years ago #

    Hello,

    I am looking to display the some of the content text that traditionally appears beneath the title directly to the right of the title like the orange text in this image

    Something like making a new css class for only some of the text?

    Does anyone have experience using divs within the accordion?

    A million thank-you's

    Marisa

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

  2. Marventus
    Member
    Posted 4 years 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!

  3. Marisa
    Member
    Posted 4 years 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>
  4. Baden
    Member
    Plugin Author

    Posted 4 years 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!

Topic Closed

This topic has been closed to new replies.

About this Plugin

  • Collapse-O-Matic
  • Frequently Asked Questions
  • Support Threads
  • Reviews

About this Topic