2 Replies Latest reply on Feb 18, 2014 9:00 AM by DearEmily33

    jQuery and Javascript showing and hiding divs in web app detail view

    DearEmily33

      Hi there, I admit I'm new to javascript and jquery however I've had some success using both on my webapp input forms placed on pages. Now I'm struggling because I'm trying to showcase the results of the input form on the detail page view version of the web app. For some reason I can't get the coding to work and I'm not sure why. If you have any tips or suggestions on how I can make it work I would be grateful.

       

      Here is an example of some of the code I am using. There are several blocks of code on the page and they all have id tags to correspond to april 19th-26th. The goal is to show or hide a div when a certain value is present in the 'date19{tag_19th}' - for some reason I couldn't get the traditional show/hide jquery scripting to work so I discovered a work around for that aspect of it. Then once that div is show you should be able to click on the link within it to show another nested div that is hidden.

       

      The main problem I am having is with the scripting on the anchor tag with the id '19th_link' and the div id '19th_shifts.' I can't get the scripting (at the bottom of the page) to work with them and I'm not sure why. I think I've tried every incarnation of spelling and positioning but I'm at a loss. If you have any insight into this I would be grateful for help.

       

      Thanks!!!

       

       

      <div class="date19{tag_19th}"><a id="19th_link" href="#19th_shifts"><h4>Saturday, April 19th</h4></a><br>
                      <div id="19th_shifts" style="display:none;">
                          <div class="row">
                              <div class="twelve columns shift_block"><strong>Shifts available:</strong>
                                  <div class="row">
                                      <div class="six columns">
                                          <div class="detail_shifts" id="19_s1"><h4>Shift 1</h4>
                                              <strong>Time:</strong> {tag_19_s1_a}-{tag_19_s1_b}<br><strong>Volunteers Requested:</strong> {tag_19_s1_volunteers}
                                              <br /><strong>Notes:</strong> {tag_19_s1_notes}</div> 
                                          <div class="detail_shifts" id="19_s3"><h4>Shift 3</h4>
                                              <strong>Time:</strong> {tag_19_s3_a}-{tag_19_s3_b}
                                              <br /><strong>Volunteers Requested:</strong> {tag_19_s3_volunteers}
                                              <br /><strong>Notes:</strong> {tag_19_s3_notes}</div>
                                          <div class="detail_shifts" id="19_s5"><h4>Shift 5</h4>
                                              <strong>Time:</strong> {tag_19_s5_a}-{tag_19_s5_b}
                                              <br /><strong>Volunteers Requested:</strong> {tag_19_s5_volunteers}
                                              <br /><strong>Notes:</strong> {tag_19_s5_notes}</div>
                                      </div>
                                      <div class="six columns">
                                          <div class="detail_shifts" id="19_s2"><h4>Shift 2</h4>
                                              <strong>Time:</strong> {tag_19_s2_a}-{tag_19_s2_b}
                                              <br /><strong>Volunteers Requested:</strong> {tag_19_s2_volunteers}
                                              <br /><strong>Notes:</strong> {tag_19_s2_notes}</div>
                                          <div class="detail_shifts" id="19_s4"><h4>Shift 4</h4>
                                              <strong>Time:</strong> {tag_19_s1_a}-{tag_19_s1_b}
                                              <br /><strong>Volunteers Requested:</strong> {tag_19_s4_volunteers}
                                              <br /><strong>Notes:</strong> {tag_19_s4_notes}</div>
                                          <div class="detail_shifts" id="19_s6"><h4>Shift 6</h4>
                                              <strong>Time:</strong> {tag_19_s6_a}-{tag_19_s6_b}
                                              <br /><strong>Volunteers Requested:</strong> {tag_19_s6_volunteers}
                                              <br /><strong>Notes:</strong> {tag_19_s6_notes}</div>
                                      </div>
                                      </div>
                                  </div>
                              </div>
                          </div>
                      </div>
      
      <script type="text/javascript">
      $(document).ready(function(){
        $("#19th_link").click(function(){
          $("#19th_shifts").hide();
        });
      });
      </script>