<div id="after-header">Stuff</div>
<script type="text/discourse-plugin" version="0.8">
api.onPageChange(() => {
let currentUser = api.getCurrentUser();
var groups = currentUser.groups;
const isInGroup1 = groups.some(g => g.name === 'group1');
const isInGroup2 = groups.some(g => g.name === 'group2');
const isInGroup3 = groups.some(g => g.name === 'group3');
if (isInGroup1) {
$("#after-header").addClass("group1");
}
if (isInGroup2) {
$("#after-header").addClass("group2");
}
if (isInGroup3) {
$("#after-header").addClass("group3");
}
});
</script>
.button-a,
.button-b {
display: none;
}
#after-header.group1 .button-a {
display: block
}
#after-header.group2 .button-b {
display: block
}
It also seems to work if you replace
api.onPageChange(() => {
with
$( document ).ready(function() {
and then the script won’t load on every page, but I never know for sure where I need api.onPageChange(() => {
.