title: How do I toggle view/display of custom HTML elements?
body: <p>thank you for taking the time to review my question! :-)  I am attempting to write better, cleaner, more maintainable HTML using custom HTML elements as opposed to the traditional 'div' methods.  I have a very simple example that works using a div and a class on it to map my link to the div that I want to show/hide and this does work.  I include this as a working example of the kind of functionality I am trying to produce:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style&gt;
              &lt;!-- Not sure if display or visibility is the way to go so will look --&gt;
              &lt;!-- that later, for now just setting both as that works --&gt;
  
              &lt;!-- For some reason doing this does not seem to work --&gt;
              .hidden {
                  display: none;
                  visibility: hidden;
              }
              .unhidden {
                  display: block;
                  visibility: visible;
              }
  
              &lt;!-- but, doing this does, anyone any idea why? --&gt;
              .hidden { display: none; }
              .hidden { visibility: hidden; }
              .unhidden { display: block; }
              .unhidden { visibility: visible; }
          &lt;/style&gt;
          &lt;script type="text/javascript"&gt;
          function toggle_view_div(divID) {
                   var item = document.getElementById(divID);
                   if (item) {
                       item.className=(item.className=='hidden')?'unhidden':'hidden';
                   }
          }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              This test shows or hides a div referenced by its class
          &lt;/p&gt;
          &lt;a href="javascript:toggle_view_div('testToggleDivID');"&gt;Do the test&lt;/a&gt;
          &lt;div id="testToggleDivID" class="hidden"&gt;
              &lt;h3&gt;Testing Toggling HTML&lt;/h3&gt;
          &lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>However, I am trying to provide this kind of functionality with multiple links to multiple sets/subsets of text, I have tried the following but am obviously doing something silly as I can't get it to work:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;script type="text/javascript"&gt;
              function toggle_view_node(nodeID) {
                  nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
                  nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
              }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              This test shows or hides Topic 1 custom element, (or at least attempts to
          &lt;/p&gt;
              &lt;a href="javascript:toggle_view_node('Topic1');"&gt;Topic 1&lt;/a&gt;
          &lt;p&gt;
              This test shows or hides Topic 2 custom element, (or at least attempts to
          &lt;/p&gt;
              &lt;a href="javascript:toggle_view_node('Topic2');"&gt;Topic 2&lt;/a&gt;
          &lt;p&gt;
          &lt;p&gt;
              This test shows or hides the Intro custom element, (or at least attempts to
          &lt;/p&gt;
              &lt;a href="javascript:toggle_view_node('Intro');"&gt;Introduction&lt;/a&gt;
          &lt;p&gt;
              This test shows or hides the Detail custom element, (or at least attempts to
          &lt;/p&gt;
              &lt;a href="javascript:toggle_view_node('Detail');"&gt;Detail&lt;/a&gt;
          &lt;p&gt;
              &lt;Intro&gt;Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page&lt;/Intro&gt;
              &lt;Detail&gt;I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below&lt;/Detail&gt;
          &lt;/p&gt;
          &lt;Topic1&gt;
              &lt;h1&gt;Topic 1&lt;/h1&gt;
              &lt;p&gt;
                   Some topics to be just simple nodes of text.
              &lt;/p&gt;
          &lt;/Topic1&gt;
          &lt;Topic2&gt;
              &lt;h1&gt;Topic 2&lt;/h1&gt;
              &lt;p&gt;
                  Other topics to be more detailed topics, &lt;Topic1&gt;potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes&lt;/Topic1&gt; though generally referencing only topic 2 content.  &lt;Detail&gt;However it would be nice to be able to toggle not directly relevant, but nice to have detail as well&lt;/Detail&gt;
              &lt;/p&gt;
          &lt;/Topic2&gt;
          &lt;Topic3&gt;
              &lt;h1&gt;Topic 3&lt;/h1&gt;
                  &lt;p&gt;
                      &lt;Intro&gt;Some topics might want an intro&lt;Detail&gt;, that may want further detail contained in them&lt;/Detail&gt; that would also provide sufficient intro in itself.&lt;/Intro&gt;
                      So, is this possible?  I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?&lt;/p&gt;
          &lt;/Topic3&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>
  
  <p>Please, can someone help me figure out what I am doing wrong.  I really want to produce the aforementioned functionality with a simple bit of CSS or JS that is as dynamic as possible.  Ideally I wont need to specify specific (especially repeated code for each topic or HTML tag that I want the ability to show/hide via a button/link.  Obviously, I will probably have to set a few default assignments, maybe turning detail off by default, but if I can avoid required extra repetitive code for each "context" I wish to flip that would be amazing!!!</p>
  
  <p>Any pointers in any direction that can help me achieve what I am attempting without having to use jQuery or a verbose library over and above JS and CSS would really make my day!</p>
  
  <p>Many thanks in advance and apologies if I am doing something really stupid, I haven't done that much work with custom elements and so probably am.</p>
  
  <p>Kind regards,</p>
  
  <p>James</p>
  
  <p>** Latest Attempt **</p>
  
  <pre><code>&lt;html&gt;
    &lt;head&gt;
      &lt;style&gt;
          &lt;!-- Not sure if display or visibility is the way to go so will look --&gt;
          &lt;!-- that later, for now just setting both as that works --&gt;
  
          &lt;!-- For some reason doing this does not seem to work --&gt;
          .hidden { 
              display: none; 
              visibility: hidden; 
          }
          .unhidden { 
              display: block; 
              visibility: visible; 
          }
  
          &lt;!-- but, doing this does, anyone any idea why? --&gt;
          .hidden { display: none; }
          .hidden { visibility: hidden; }
          .unhidden { display: inline; }
          .unhidden { visibility: visible; }
  
          &lt;!-- Playing with something like this, ideally I would --&gt;
          &lt;!-- configure the show/hide state of my custom HTML tags --&gt;
          &lt;!-- universally in a similar way? --&gt;
          Topic1.hide { display: none; }
          Topic2.hide { display: none; }
          Topic3.hide { display: none; }
          Intro.hide { display: none; }
          Detail.hide { display: none; }
  
          &lt;!-- Another attempt to configure switch state but does not work either --&gt;
          Topic1 { className: unhidden; }
          Topic2 { className: unhidden; }
          Topic3 { className: unhidden; }
          Intro  { className: unhidden; }
          Detail { className: unhidden; }
      &lt;/style&gt;
      &lt;script type="text/javascript"&gt;
          // This works, but is not clean
          function toggle_view_div(divID) {
               var item = document.getElementById(divID);
               if (item) {
                   item.className=(item.className=='hidden')?'unhidden':'hidden';
               }
          }
          // I am now attempting to use this on 'Topic1' as per the suggestion 
          // in the comments of this post, for some reason it does not work, wondering if
          // I need to do a .forEach to parse the set of nodeID's of the 'Topic1' in this
          // example, but if working whatever HTML tag name that I want to toggle in or
          // out of view
          function toggle_view_node_id(nodeID) {
               var item = document.getElementById(nodeID);
               if (item) {
                   item.className=(item.className=='hidden')?'unhidden':'hidden';
               }
          }
          // This does not work but I have left to show what I tried that did not work
          function toggle_view_node(nodeID) { 
              if (nodeID) {
                  nodeID.getAttribute('visibility')=('hidden')?item.setAttribute('visibility','visible'):item.setAttribute('visibility','hidden');
                  nodeID.getAttribute('display')=('none')?item.setAttribute('display','block'):item.setAttribute('display','none');
              }
          }
          &lt;/script&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;p&gt;
              This test shows or hides a div referenced by its class
          &lt;/p&gt;
          &lt;a href="javascript:toggle_view_div('testToggleDivID');"&gt;Do the test that works using extra layer of div with mapped class&lt;/a&gt;
          &lt;p&gt;
              This test shows or hides Topic 1 custom element, 
              (or at least attempts using the suggestion in this post 
              comments to try to make work without inline JS and call a
              function to do it as with my working example, unfortunatly
              however, this still does not seem to work :(
          &lt;/p&gt;
              &lt;a href="javascript:toggle_view_node_id('Topic1');"&gt;Topic 1&lt;/a&gt;
          &lt;p&gt;
              This test shows or hides Topic 2 custom element, 
              (or at least attempts to using existing method that doesn't work
          &lt;/p&gt;
              &lt;a href="javascript:toggle_view_node('Topic2');"&gt;Topic 2&lt;/a&gt;
  
          &lt;p&gt;When I have it working I hope to be able to have: &lt;/p&gt;&lt;a href="javascript:toggle_view_node('Topic3');"&gt;Topic 3&lt;/a&gt;
  
          &lt;p&gt;And... &lt;/p&gt;&lt;a href="javascript:toggle_view_node('Intro');"&gt;Intro&lt;/a&gt;
  
          &lt;p&gt;And this... &lt;/p&gt;&lt;a href="javascript:toggle_view_node('Detail');"&gt;Detail&lt;/a&gt;
  
              &lt;div id="testToggleDivID" class="hidden"&gt;
                  &lt;h3&gt;Testing Toggling HTML into view using a div and associated class of hidden, can I not do this on a custom element?&lt;/h3&gt;
              &lt;/div&gt;
          &lt;p&gt;
              &lt;Intro&gt;Some introduction text giving a more detailed overview that may want to be hidden by default, but able to be toggled into view with an always visible link such as at the top or on the side of the page&lt;/Intro&gt;
              &lt;Detail&gt;I may want to add detail with this ability both like this at the root of the document, but potentially inline with other text in custom elements as shown below&lt;/Detail&gt;
          &lt;/p&gt;
          &lt;Topic1&gt;
              &lt;h1&gt;Topic 1&lt;/h1&gt;
              &lt;p&gt;
                   Some topics to be just simple nodes of text.
              &lt;/p&gt;
          &lt;/Topic1&gt;
          &lt;Topic2&gt;
              &lt;h1&gt;Topic 2&lt;/h1&gt;
              &lt;p&gt;
                  Other topics to be more detailed topics, &lt;Topic1&gt;potentially including aspects of that can share the toggle feature for the root level topic 1, as per all topic 1 nodes&lt;/Topic1&gt; generally referencing only topic 2 content.  &lt;Detail&gt;However it would be nice to be able to toggle not directly relevant, but nice to have detail as well&lt;/Detail&gt;
              &lt;/p&gt;
          &lt;/Topic2&gt;
          &lt;Topic3&gt;
              &lt;h1&gt;Topic 3&lt;/h1&gt;
                  &lt;p&gt;
                      &lt;Intro&gt;Some topics might want an intro&lt;Detail&gt;, that may want further detail contained in them&lt;/Detail&gt; that would also provide sufficient intro without.&lt;/Intro&gt;
                      So, is this possible?  I don't want specific control of sub custom elements, and can do it with div's and assigned classes if I really have to, but surly it is possible with a bit of special JS or CSS to do what I am looking for?&lt;/p&gt;
          &lt;/Topic3&gt;
      &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>