How to hide a DIV with javascript on Discourse? and then change as users navigate?

(Charles Walter) #1

Has anyone here used the custom fields to hide a div using Javascript? I’m not clear why this code would not work for me. It works if I put it in the Javascript console in chrome.


I’m trying to include a particular div on topic pages vs. non-topic pages. I assume it needs to be activated differently due to the JS coding of the discourse application?

Ultimately, I would then include it as part of a separate code to load, but I remember now that the fragments in our header and footer do not get reloaded as users navigate, so this will be trickier, no?

<script type="text/javascript">
if(window.location.href.indexOf(“/t/“) > -1) {

(Charles Walter) #2

I found an alternate way to do what I was looking for, but still curious if anyone has had experience with this type of stuff.

(Vinoth Kannan) #3

You can do it in ember initializer like below.

import { cleanDOM } from 'discourse/lib/clean-dom';
import { startPageTracking, onPageChange } from 'discourse/lib/page-tracker';
import { viewTrackingRequired } from 'discourse/lib/ajax';

export default {
  name: 'toggle-div',

  initialize(container) {
    const router = container.lookup('router:main');
    router.on('willTransition', viewTrackingRequired);
    router.on('didTransition', cleanDOM);


    onPageChange((url, title) => {
      var topicPattern = new RegExp('^/t/');
      if (topicPattern.test(url)) {
      } else {

Of course you can do it easily using CSS

.archetype-regular #notopc {
 display: none;