Show/Hide Toggle Text on a Page

Icewolf08Icewolf08 Registered Users Posts: 2 Beginner grinner
edited August 29, 2013 in SmugMug Customization
On my legacy site I had a few pages (like my FAQ) where I used a simple little javascript to show and hide divs. I think it is much nicer than just having a page that is a wall of text. Here is an example: http://www.icewolfphotography.com/Pioneer-Theatre-Company/ptcfaq/20911357_mKQ3gD

Now that I am transitioning to the the new SM, I can't use the script anymore, and I can't figure out a way to toggle the visibility of text on a page. I tried the HTML5 <summay> and <details> tags, but they don't seem to work either.

I emailed support and was told to come here, so if anyone has any insight, I would appreciate it. This is probably the one major thing that is holding me back from taking my new site live.

Comments

  • AllenAllen Registered Users Posts: 10,013 Major grins
    edited August 29, 2013
    When I want to hide something like text an a page I add a class name to it.

    <span class="noShow">xxx xxx xxx</span>


    Some examples I'm using on NewSmug now.
    .noShow {
      display: none;
    }
    
    .sm-user-loggedin .noShow {
      display: block;
    }
    
        /* showing videos */
    .sm-page-gallery-album .noShowGallery {display:none; color:#ccc !important;}
    .sm-page-gallery-keyword .noShowKeyword {display:none; color:#ccc !important;}
    
    .sm-lightbox-caption .noShowGallery,
    .sm-lightbox-caption .noShowKeyword {display: none;}
    
    Al - Just a volunteer here having fun
    My Website index | My Blog
  • Icewolf08Icewolf08 Registered Users Posts: 2 Beginner grinner
    edited August 29, 2013
    Allen wrote: »
    When I want to hide something like text an a page I add a class name to it.

    <span class="noShow">xxx xxx xxx</span>


    Some examples I'm using on NewSmug now.
    .noShow {
      display: none;
    }
    
    .sm-user-loggedin .noShow {
      display: block;
    }
    
        /* showing videos */
    .sm-page-gallery-album .noShowGallery {display:none; color:#ccc !important;}
    .sm-page-gallery-keyword .noShowKeyword {display:none; color:#ccc !important;}
    
    .sm-lightbox-caption .noShowGallery,
    .sm-lightbox-caption .noShowKeyword {display: none;}
    

    That's the easy part, hiding the text. The tricky part is being able to toggle the visibility. Like I said originally, I used to do it with javascript, but that's out now. HTML5 is supposed to support this behavior natively, but apparently something in the way that the new SM works, doesn't like that code.
Sign In or Register to comment.