Strange layering/float issue

On what element, or class, did you set the z-index?

The expanded content boxes have the following ids:

#target-impact1
#target-impact2
#target-impact3

The parent content boxes have class .one_third which is given by the theme.

I’ve tried assigning z-index values in Firebug and it is not having an effect.

#target-impact1 {
   margin: 0 auto;
   padding: 2em 3em;
   width: 300% !important; <--please explain this
   background: #EFE8DD;
}

The three .one_third boxes are 30.6% width – set by the theme.

I want the expanded content to be full width of the page bounding box (eg the parent content box) so this ‘breaks out’ of the one-third boxes.

Was the z-index declared for the class of .one_third or for id’ed target elements?

UaMV: I’ve tried on either and both.

That said, the id’ed target elements (the expanded content) is within the .one-third div so logically applying the z-index should only be on the target elements themselves.

i don’t know if this could be the issue, but just found this article … i learned a few things in reading it. Specifically, this quote …

When you add css positioning to an element and give it a z-index (other than auto) it creates new stacking context with new stacking levels inside the new context.

The z-index value creates a new integer stacking level for that element with a position along the z-axis set relative to the other boxes within the same stacking context.

https://www.vanseodesign.com/css/css-stack-z-index/

Really good and clear article, but it doesn’t seem to help.

I haven’t found any z-index combination that has any effect on the target boxes whatsoever.

just to be clear: You want to have three columns of text with expand triggers at the bottom of each. When a trigger is expanded, the content will expand, full width and below all three columns.

What happens when more than one content area is expanded? Does the first one collapse, or do they just ‘stack’ up?

Regardless, I think you will be better served if you use the roll-your-own method. This will allow you to define your columns, place your triggers, and close the columns… then below that, insert your hidden target content areas.

Again, the key is you want to place the target containers outside of your columns.

Thanks Baden.

When more than one is expanded they do stack up so yes, the best thing to do is to pull the triggers/hidden target outside of the columns.

On to that next.

Let me just say that I love this plugin – I think I’ve used it on at least 10 sites including some personal ones so thanks!

Glad you like it. Let us know if you need help with the roll-your-own setup.

Hey Baden,

I tried the roll-your-own and it’s a little better. But I was wondering if there is a way to have only one target area expanded at a time (so they don’t stack up).

In other words, when you expand one, the others on the page close. I know this is possible with jQuery…

Check out the rel=”” attribute on the documentation page.

UaMV: Sweetness! Highlander is it…

One last question…

I’m trying to highlight the ‘parent’ column when the target for that column is expanded but I can’t seem to make it work:

If you go back to the site: https://graettingercole.com/

I’m using the middle box. It has a light blue highlight but I want that only to come on when the target below it is expanded.

I’m using the following:

<script>
if (jQuery("#target-impact2").is(":visible")) {
    jQuery("#imp2wrap").addClass("imp2_highlight");
} else {
	if (jQuery("#target-impact2").is(":hidden")) {
		jQuery("#imp2wrap").removeClass("imp2_highlight");
	}

}
</script>

It is adding the class even when the target contact is set to display:none;.

Any ideas on how to accomplish this?

Dude, you are really diving into the deep end!
Ok, so a couple of things:

First, I recommend you lock the position of the open/close trigger above the target content, and then place an additional ‘collapse trigger’ at the bottom of each target content div. Check out the internal collapse trigger in the documentation

Second, to answer your question: This is what we know so far:
the id of the second box is impact2, this means that the target content id must be: target-impact2
So far so good. Now, you want to make it so when trigger is toggled, then we toggle the highlight class to the partent wrapper (imp2wrap). So far so good? Good.

Now what you’ll want to do is:

1. rename the ID of your parent div from imp2wrap to parent-impact2: basically parent-<trigger_id>
2. add the following to your functions.php file:

   function my_custom_js() {
   ?>
   <script type="text/javascript">
   jQuery(document).ready(function() {
       jQuery('.collapseomatic').click(function() {
           var thisID = jQuery(this).attr('id');
   	if(thisID.indexOf('bot-') != '-1'){
   		thisID = thisID.substr(4);
   	}
           var parentID = 'parent-' + thisID;
           jQuery('#' +parentID ).toggleClass('my_highlight_class');
       });
   });
   </script>
   <?php
   }
   add_action('wp_head', 'my_custom_js');

We even created a little demo for you so you can better wrap your head around it:
https://spacedonkey.de/464/collapse-o-matic-changing-parent-element/
Can you dig it?