joshuaiz

Hey Baden,

That’s basically what I’m doing…but that doesn’t address the parent box retaining the class when you expand one of the other boxes…

Hey Baden,

That’s basically what I’m doing…but that doesn’t address the parent box retaining the class when you expand one of the other boxes…

Hey UaMV – haven’t gotten to the mobile version of this section yet but thanks!

Ok, now I am coming up against the initial issue again. I have the middle box set to use the above custom js. Everything is great if you open and close the middle box.

But, if the middle target content is expanded and then you click one of the other triggers (box 1 or box 3) you get strange results: the middle box retains the jquery added class even if forced shut by the rel attribute.

I’ve made each expanded box a different color to show this. The result I am looking for is to highlight each parent box + expanded content with the same background so that you know what goes to what as I have with the middle box.

Thanks both of you for the help.

Sweet that totally rocks…got it working. Thanks!

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?

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…

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!

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.

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.

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.

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.

Sorry for the delayed response…thanks for this – easy as pie!

I am using this in footer.php in my child theme:

<?php
if (!is_page_template('menu.php')) { ;?>

<div id="gallery">
<?php wp_carousel(0); ?>
</div>

<?php } else { ?>

<?php } ?>

Looking at this a little closer, I see it is using the “stepcarousel” class on the home page. Why, I have no idea – the call for WP Carousel is generated from the same place for all the pages and there is only one carousel.

Frankly, I don’t even know what Step Carousel is and why it is selecting it only for the home page.

How do I fix this?

I am using the default theme in WP Carousel.

Thanks!

I should add that all the top level pages (except ‘Menu’) use the same page template(s) so I really don’t know why different html is being generated for the home page – that doesn’t make any sense at all.