So, as some of you may have seen, I’m trying to create a “show more” button that collapses & expands certain parts of my posts. Another user kindly gave me some code I can use, but I’m not sure exactly how to implement it as I’m very inexperienced with coding and have never worked with CSS.
I was told to add this to my css file, which I have done:
`.showStuff { width: 100%; max-height: 0px; overflow: hidden; background: #fff; color: #000; transition: all 1s linear; }`
`.showStuff.openMe { max-height: none; border: 1px solid #000; }`
`.myButton { padding: 12px 6px; border: 1px solid #ddd; font-size: 18px; }`
​
I also was told to input this near the end of my results.php code, which I’ve done.
`<script>`
`function openToggle(event) {`
`var button = $(event.relatedTarget); // find which button was clicked`
`var target =` [`button.data`]`(‘target’); // get the data attribute`
`const element = document.getElementById(‘openme-‘ . target);`
`element.classList.toggle(‘openMe’);`
`}`
`</script>`
​
Where I’m confused is, I was given these few lines mixed in with my results.php code:
`// I WRAP THIS IN A DIV AND USE COUNTER TO ENSURE UNIQUE ID`
`echo ‘<div class=”showStuff” id=”openme-‘ . $counter . ‘”>’;`
`/* I CLOSED THE DIV */`
`</div>`
`/* ADD THE BUTTON HERE`
`<?php`
`echo ‘<button class=”myButton” data-target=”‘ . $counter . ‘” onclick=”openToggle()”>Click Me</button>’;`
`?>`
`</div>`
`// MOVE THE COUNTER ON`
`$counter = $counter + 1;`
​
I don’t know if these are CSS or not and I don’t know what to do with them. Is anyone out there able to help out in clarifying and implementing this?
​
Thanks in advance!
[ad_2]