Buttons displaying individual data (comments) below said pushed button

[Throck]

Good morning all,

Was wondering is there is an easy way other than ordering Elementor Pro, to display comments below a particular year button being pushed. Looking to stay on the same screen as opposed to opening a new tab.

Example: http://texashightigers.com/guestbook/

Thanks in advance.

[Bill Christensen]

Probably the easiest way to do that is with an inline javascript.  I did something like that years ago on a site, but the inline javascript plugin I used then is way out of date...  It still works, but I can't in good conscience recommend it.  There are probably other, better plugins out there which will accomplish the same thing.  And I suspect someone on this list is probably better at javascript and can suggest corrections to what's below.

PS:  your grammar is incorrect.  50s, 60s, 70s etc DO NOT get apostrophes.  They are neither contractions or possessives. They are plurals. Pet peeve.  You may continue reading if you promise to remove the apostrophes! 




The basics of the javascript I added to the page is:

*******************
this is the script part.  You'll need to create separately named showhide functions for each element you want to open (ie: showhide50, showhide60, etc)
*******************

[script language="javascript"  type="text/JavaScript"]
<!--

var state = 'none';

function showhide(layer_ref) {

if (state == 'block') {
state = 'none';
}
else {
state = 'block';
}
if (document.all) { //IS IE 4 or 5 (or 6 beta)
eval( "document.all." + layer_ref + ".style.display = state");
}
if (document.layers) { //IS NETSCAPE 4 or below
document.layers[layer_ref].display = state;
}
if (document.getElementById &&!document.all) {
hza = document.getElementById(layer_ref);
hza.style.display = state;
}
}

//-->
[/script]

*******************
Below is the part that goes in the page body.  In my case, the text "By Name" is what gets clicked on to expand the hidden text.  In yours, you'd put the buttons you've created. You'll need to name each div separately as well (ie, div50, div60, etc)
*******************

<span style="text-decoration: none;" onclick="showhide('div1');"> By Name </span>
            <div id="div1" style="display: none;">
[your data here]
            </div><noscript><div id="div1" >
[your data here]
            </div></noscript>

--
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To post to this group, send email to wordpres...@googlegroups.com
To unsubscribe from this group, send email to wordpress-aust...@googlegroups.com
For more options, visit this group at http://groups.google.com/group/wordpress-austin?hl=en
 
Our meeting information is available at http://www.meetup.com/austinwordpress/
---
You received this message because you are subscribed to the Google Groups "WordPress Austin" group.
To unsubscribe from this group and stop receiving emails from it, send an email to wordpress-aust...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

-- 
Bill Christensen
http://SustainableSources.com
http://LinkedIn.com/in/billc108

Dance like nobody's watching.
Encrypt like everyone is.   
--Adrián Lamo

[Throck]

Happy Friday Bill and thanks for the info. Apostrophe's have been abolished. Looking forward to some great ideas from this group.

[Dan Poynor]

Hi Throck,

You might consider using CSS tabs. Examples:

https://codepen.io/vulpesigni/pen/yyZYNy

https://codepen.io/mildrenben/pen/bdGdOb

Or use an accordion interface. Examples:

https://codepen.io/jcoulterdesign/pen/dPeMKY

https://codepen.io/oknoblich/pen/tKfab

https://www.hongkiat.com/blog/create-css-based-content/

More: https://codepen.io/search/pens?q=accordian

DAN

danpoynor.com

[Throck]

Thank you sir.