Using to expand/collapse a widget itself

This topic is: resolved

Tagged: , , , ,

This topic contains 6 replies, has 2 voices, and was last updated by  Evan Herman 9 years, 7 months ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • August 18, 2014 at 2:43 pm #3397

    csburdick
    Participant
    Post count: 4

    Ok before you say “you can’t” here’s what’s I’ve done 🙂

    I made the widget, grabbed the source code of the output, and pasted it into the sidebar file. I’m trying to add ECF to show the widget title using it as the anchor to expand the content of the widget, which is actually just a list.

    Here’s my original, unaltered code:

    <aside id=”nav_menu-5″ class=”widget widget_nav_menu”><h3 class=”widget-title”>State Pages</h3><div class=”menu-states-container”><ul id=”menu-states” class=”menu”><li id=”menu-item-3659″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3659″>Alabama
    <li id=”menu-item-3660″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3660″>Alaska
    <li id=”menu-item-3661″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3661″>Arizona
    </div></aside>

    (cut short for the sake of tidiness)

    Here’s the code after I try to add ECF (this is what I’ve added to the sidebar file):

    <?php if ( is_page( 3605 ) ) { ?>
    <div class=”exp-col-content-holder”><aside id=”nav_menu-5″ class=”widget widget_nav_menu”><h3 class=”widget-title”>State Pages</h3><div class=”menu-states-container hidden-content”><p class=”hiddenContentp”><ul id=”menu-states” class=”menu”><li id=”menu-item-3659″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3659″>Alabama
    <li id=”menu-item-3660″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3660″>Alaska
    <li id=”menu-item-3661″ class=”menu-item menu-item-type-post_type menu-item-object-page menu-item-3661″>Arizona
    </p></div></aside></div>
    <?php } ?>

    You can see the result here: http://www.pokersites.us/dev/dev-page-2/ – it’s the bottom-most widget on the sidebar. You can get an idea of what I’m trying to accomplish by the widget above it (using a different plugin) but the styling is all messed up there as well.

    Thanks so much for your help.

    • This topic was modified 9 years, 8 months ago by  csburdick. Reason: messy html char codes when using the ticks
    August 18, 2014 at 3:25 pm #3399

    Evan Herman
    Keymaster
    Post count: 568

    Hey there csburdick,

    I understand what you are trying to achieve, and it is definitely possible. I’ve used the widget inside of a sidebar on numerous sites without issue. I’m not sure what the issue might be, but I’m going to test a few things out on a localhost installation and I’ll report back here.

    Thanks,
    Evan

    August 18, 2014 at 3:30 pm #3400

    Evan Herman
    Keymaster
    Post count: 568

    It looks like you were missing a few html tags, such as the </ul> and the closing </li> tags, but I’m not sure if that was the issue or not.

    The following code snippet should get you pointed in the right direction. This all gets placed into a ‘test’ widget in the sidebar:

    • This reply was modified 9 years, 8 months ago by  Evan Herman.
    • This reply was modified 9 years, 8 months ago by  Evan Herman.
    • This reply was modified 9 years, 8 months ago by  Evan Herman.
    • This reply was modified 9 years, 8 months ago by  Evan Herman.
    August 25, 2014 at 12:50 pm #3415

    csburdick
    Participant
    Post count: 4

    Hey mate, thanks for the help. It’s more functional for sure, but still having some issues: http://www.pokersites.us/dev/dev-page-2/

    You can see the styling is all screwey and the arrow get thrown up above the title. Any ideas what’s doing that and how to get it to where the arrow is floating right instead?

    Thank you!

    August 25, 2014 at 2:36 pm #3416

    Evan Herman
    Keymaster
    Post count: 568

    Hey Chris,

    You’ll need to adjust the style attributes on the .ecf_closed:before and the .expand-cnt-link:before classes. I would make these changes to your child themes style.css file so you don’t lose the changes when a plugin update is released.

    That should get things properly lined up. Let me know if that helps at all.

    Thanks,
    Evan

    August 26, 2014 at 6:24 am #3420

    csburdick
    Participant
    Post count: 4

    Great, thanks again for the help Evan. It’s looking much better now and I was able to get the weird border thing gone as well.

    The only issue remaining is the arrow bit – ideally it’d be after the title floating right but I can’t seem to get it there. I’ve tried changing to :after but that just makes it break a line and go into the widget content; I can’t seem to get it to line up properly. Any ideas?

    Again I really appreciate this.

    – Chris

    September 19, 2014 at 10:47 am #3431

    Evan Herman
    Keymaster
    Post count: 568

    It looks like you’ve gone a separate route. Marking this as resolved.

    Thanks,
    Evan

  • Author
    Posts
Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.