0

I am trying to hide/show a div that is within a for loop using jquery's toggle. When I click the button to toggle, the div slides out for a quick moment, but then hides again. When this happens, the toggle button almost seems disabled for the next click...then works again with the same problematic div display. I used the {{email.sender}} template value because when I clicked on the toggle button, all the items in the list would be activated instead of just that one. The below code is inserted into a tab with Jquery (this part is working). Thanks for any advice you can give on this-

<div id="email_received_list">
    {% for email in email_received_list %}
        <p>
            <input type="button" id="{{email.sender}}" value="Show Message">      {{email.sender}}:  {{ email.subject }} 
        </p> 
    <script>
        $(document).ready(function(){
            $('#{{email.sender}}').click(function() {
                $('.{{email.sender}}').slideToggle('fast');
                return false;
            });
        }); 
    </script>       
    <div class="{{email.sender}}" style="display:none; background-color:#4CF;width:100%;height:100%;"></div>

    {% else %}
        (You have not received any messages yet.)   
    {% endfor %}

3
  • Inside a for loop, you are creating an element with a specific ID. If you have multiple email in the list from the same sender, you will have multiple elements with the same ID. Don't know about your other problems, but this one should probably be fixed.
    – Steve H.
    Aug 7, 2013 at 20:30
  • Thanks Steve - yeah I thought about that and will probably fix that issue by using the email.key instead of email.sender- Still trying to figure out the toggle problem though.
    – Matt Ellis
    Aug 8, 2013 at 13:02
  • Just a note, when I try to use show() instead of slideToggle('fast') nothing happens - as with the slideToggle, there is at least a flash of something happening that then goes away. Why would there be a difference here? thanks
    – Matt Ellis
    Aug 8, 2013 at 20:48

1 Answer 1

0

Ok, I feel stupid on this one - but once I added some actual content to the div (not just trying to color a square) it worked fine. I guess since it was in a loop, it was trying to size the div match the content. When there was no content, the div just hid itself again. If you know something different on this, please let me know -thanks.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.