JavaScript/jQuery and Velocity hideshow functionality

djsedil's Avatar

djsedil

30 Apr, 2016 12:48 AM

I know I have been staring at things too long, so I am giving up and asking for help.
I know how to implement hide/show functionality of a button on a div using jQuery. I know how to iterate through items using #foreach in Velocity.
But I haven't been able to make them go together. My scenario is this: User is typing up How-To steps into a template and they want it outputted where the step title of the How-To is in the button and the description is in a div below it.
For example:
How to Fold A Paper Airplane
Step 1: Get a Sheet of Paper
The paper can be any color, but please ensure the paper size is 8.5" by 11"

Step 2: Fold Paper in half
Fold the paper in half using the longest side of the paper (visual image goes here)

Step 3 and so forth...

Now because users can enter as many steps for whatever How-To tutorial they are using, the number of steps is indeterminable.
What is the best way to implement this?
Thank you!!!

  1. 1 Posted by Ryan Griffith on 02 May, 2016 01:32 PM

    Ryan Griffith's Avatar

    Hi,

    When you have a moment, please feel free to attach your Format and some sample XML so we can help take a closer look at where you are at currently.

    Thanks!

  2. 2 Posted by djsedil on 03 May, 2016 04:28 AM

    djsedil's Avatar

    Due to the information, I had to throw together some mock data. I have attached the last version of velocity where it doesn't completely error out on me, but the functionality doesn't work great.

  3. 3 Posted by Ryan Griffith on 03 May, 2016 01:41 PM

    Ryan Griffith's Avatar

    Hi,

    Overall, I would say you are on the right track with this Format. I made a could of minor adjustments:

    #set ($process = $_XPathTool.selectSingleNode($contentRoot, '//system-page'))
    #set ($title = $process.getChild('title').value)
    #set ($structure = $_XPathTool.selectSingleNode($contentRoot, '//system-data-structure'))
    #set ($steps = $_XPathTool.selectNodes($structure, '//step'))
    
    <div>
      <h1>$title</h1>
    
      #if ($steps.size() > 0)
          #foreach ($step in $steps)
              #set ($sTitle = $_EscapeTool.xml($step.getChild('step-title').value))
              #set ($sOverview = $_SerializerTool.serialize($step.getChild('step-overview'), true))
              #set ($sDescription = $_SerializerTool.serialize($step.getChild('description'), true))
              #set ($sResources = $_SerializerTool.serialize($step.getChild('step-resources'), true))
              <button type="button" id="hideshow" class="pStep" value="hide/show">$s{Title}</button>
              <div id="content">
                <p>${sOverview}</p>
                <p>${sDescription}</p>
                #if ($sResources != '')
                  <p>${sResources}</p>
                #end
              </div>
          #end
      #end
    </div>
    

    A couple of additional items that jump out at me:

    • You are using ID attributes for the button and content container, which will not work because you will end up with multiple elements using the same ID. This produces invalid HTML and selecting by ID won't work. Once you work this out, you should be able to use jQuery and apply a click event on the buttons to toggle the visibility of the next div. For example:
      $('button').on('click', function() {
      $(this).next('div').toggle();
      });
      
    • You are wrapping the resources in <p>, but the resources in your sample XML already have <p> tags. This will produce nested paragraphs and might look weird

    Please let me know if you have any questions.

    Thanks!

  4. 4 Posted by djsedil on 03 May, 2016 04:18 PM

    djsedil's Avatar

    Ah that was the tiny puzzle piece in my brain I needed! I got it to work with your guidance. Thank you so much!

  5. 5 Posted by Ryan Griffith on 03 May, 2016 05:44 PM

    Ryan Griffith's Avatar

    Not a problem at all. I am glad to hear I was able to point you in the right direction.

    I'm going to go ahead and close this discussion, please feel free to comment or reply to re-open if you have any additional questions.

    Have a great day!

  6. Ryan Griffith closed this discussion on 03 May, 2016 05:44 PM.

Discussions are closed to public comments.
If you need help with Cascade CMS please start a new discussion.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

 

26 Aug, 2016 01:19 PM
25 Aug, 2016 03:02 PM
25 Aug, 2016 12:50 PM
24 Aug, 2016 08:43 PM
24 Aug, 2016 07:20 PM
21 Aug, 2016 01:20 PM