[ad_1]
I’m quite inexperienced with coding and I would like to add a “Show more” function to my results.php file for my search results. Currently, I have posts with a list of ACF fields displaying in my search results section. I’d like for a few of those fields to only show when users click a “Show more” button.
I spoke to the Search and Filter plugin support and they said:
>”That would require some custom coding to achieve. It would need an HTML element to enclose the hidden fields and have the ‘Show More’ button and JavaScript to trigger it all.”
Would any of you be able to help me achieve this?
[ad_2]
There are a number of ways. One is to edit your loop which shows posts. Create a variable that increments and then on the ‘toggled’ text – add an ID with the increment… and add the function call and data to a button.
in essence – and not at all in proper code syntax insert the relevant bits in your template loop:
`$int = 1`
`for each post as posts {`
`$html = ‘<div class=”showStuff” id=”foo-‘ . $int . ‘”> . $content . </div>’;`
`$html .= ‘<button data-target=”‘ . $int . ‘” onclick=”myFunction()”>Click me</button>’`
`$int = $int + 1;`
`}`
Now you have a div with id and a button that has that ID in a data attribute and triggers a function.
Now create the javascript function that’s triggered by the buttons…
`myFunction(event) {`
`var button = $(event.relatedTarget); // find which button was clicked`
`var target = button.data(‘target’); // get the data attribute`
`const element = document.getElementById(‘foo-‘ . target);`
`element.classList.toggle(‘visible’);`
`}`
This finds the button, grabs the $int (data-target=) – gets the right div by that ID (e.g. foo-1) and toggles the css class ‘visible’. You can change this class. and style it to show/hide in a way that suits the page layout.
You can put this in the template, or enqueue it or whatever…