[Resolved] Content Template inside element

[Author]

Posts

[stewartE]

Not sure if this is possible - but I've been asked to design a page with an accordion on it, which is fairly straight forward. But in the actual heading - rather than the area that shows once expanded (which i'm calling the panel) they want some fairly complicated design - 3 columns, some different icons etc etc. I am trying using button element for the header and I had an idea I could add a content template into the button element (I think that's probably invalid code but wasn't sure how else to do it!)

So I created a 3 column row with Visual Composer in views content template and embedded the shortcode in the button element

But instead of showing the content template it just shows the short-code (see screenshot)

Is this even possible or am I approaching this totally the wrong way!!

So this is my HTML

<button class="accordion">
[wpv-post-body view_template="test-content-template"]
</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

This is My JS

<script type="text/javascript">
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
</script>

This is my CSS
.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;

}
.active, .accordion:hover {
background-color: #ccc;

}
.accordion:after {
content: '\002B';
color: #777;
font-weight: bold;
float: right;
margin-left: 5px;

}
.active:after {
content: "\2212";}

.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;

}

Thanks!

[Luo Yang]

Hello,

There is a built-in feature within Layouts plugin:
https://toolset.com/documentation/user-guides/accordion-cell/

I suggest you try the "Accordion Cell" instead of setup those custom JS codes.

[stewartE]

Unfortunately the Accordion cell does not allow me to do what I need to do (I also don't use Layouts in my site).

With layouts you can only modify the expandable content not the heading. In the screenshot I have outlined in red the area i need to be able to add html etc to. Currently you can only add a title.

I've also added a rough screenshot of what I am trying to achieve The top is an ordinary Accordion and the bottom is what I am trying to do. So can I add a custom template as a short code within a button element. Currently when i try the short code shows instead of the design (see previous screenshot)

Thanks

[Luo Yang]

For the question:

So can I add a custom template as a short code within a button element

Yes, of course, you can put the content template shortcode within a button element.

In the codes you mentioned above:

<button class="accordion">
[wpv-post-body view_template="test-content-template"]
</button>

The Views shortcode [wpv-post-body] should be able to work in the simple post content, for example, you can create a new wordpress post/page, put above codes into the post content, and test again.
https://codex.wordpress.org/Shortcode_API

[stewartE]

Hi Thanks for getting back to me.

That's exactly what I did - I added the content template shortcode between the button element but instead of showing the content template on the front end it showed the shortcode.

Screenshot reattached for reference about what I am seeing. So the shortcode does not work within the Button element although it should

I think i narrowed down the issue - the content template works fine when embedded into a post but I am using the html and javascript Visual Composer Elements to enable me to add pure html and JS to a WordPress page. I think the issue is that the content Template Shortcode is not working within the Visucal Composer HTML block. Is there any way around this?

Thanks

[Luo Yang]

Have you tried shortcodes of other plugins?
If other shortcodes do not work too, then the problem is in the Visual Composer side, it does not accept custom shortcode.

Can you check it with the author of "Visual Composer Elements", check if it is possible to run shortcodes within the Visucal Composer HTML block.