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>

[Liam Dilley]

isnt this related to this thread?

http://forums.adobe.com/message/6130615#6130615

[DearEmily33]

I wish that was what I needed and it is helpful but no that's not exactly what I need. I need the javascript that will allow me to toggle a div to visible based on it's contents. I also can't understand why this bit of script is not working:

$(document).ready(function(){
   $("#19th_link").click(function(){
     $("#19th_shifts").hide();  
  });

});

Or for that matter why this won't work either:

$(document).ready(function(){
  $("#19th_link").click(function(){
    $("#19th_shifts").fadeToggle("fast");  
  });

});