SitePoint Sponsor

User Tag List

Results 1 to 2 of 2
  1. #1
    SitePoint Zealot
    Join Date
    Apr 2003
    Location
    canada
    Posts
    148
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Prevent slide toggle from closing when a user selects a check box

    Hello,


    I have a div tag consisting of check boxes. the div surrounding the content is controlled by a function that opens and closes the div tag using slide toggle.
    Problem area is inside the div tag, every time i click one of the check box the div tag closes.
    how do i prevent the div tag from closing when i click a check box?


    HTML Code:
    
    <!DOCTYPE html>
    <html>
    <head>
    
    <script src="http://code.jquery.com/jquery-latest.js"></script>
      
    <style>    
    
      #toggle-view {
        list-style:none;    
        font-family:arial;
        font-size:12px;
        margin:0;
        padding:0;
        width:800px;
    }
     
        #toggle-view li {
            margin:10px;
            border-bottom:2px solid #ccc;
            position:relative;
            cursor:pointer;
        }
         
        #toggle-view h3 {
            margin:0;
            font-size:18px;
        }
     
        #toggle-view span {
            position:absolute;
            right:5px; top:0;
            color:#1e1e1e;
            font-size:20px;
        }
         
        #toggle-view .panel {
            margin:5px 0;
            display:none;
        }   
    </style>
    
    
    [B]<script>
    $(document).ready(function () {
         
        $('#toggle-view li').click(function () {
            var text = $(this).children('div.panel');
            if (text.is(':hidden')) {
                text.slideDown('200');
                $(this).children('span').html('-');     
            } else {
                text.slideUp('200');
                $(this).children('span').html('+');     
            }
        });
     
    });
    </script>[/B]
    
    <ul id="toggle-view">
        <li>
            <h3>Click here to add Project Category</h3>
            <span>+</span>
            <div class="panel">
    		
    		
                <p> Instructions or description of selection.. 
    			<table border="1" bordercolor="#FFFF66" style="background-color:#FFFFCC"  cellpadding="0" cellspacing="0" >
    				<tr>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 3</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 4</td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 3</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 4</td>
    				</tr>
    				<tr>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 1</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 2</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 3</td>
    					<td><input type="checkbox" name="vehicle" value="Bike">Category 4</td>
    				</tr>
    			</table>	
    			</p>			
    			
            </div>
        </li>
    </ul>
    <br/><br/>
    </body>
    </html>

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,889
    Mentioned
    208 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    I know you posted this a while back, but in case you didn't find a solution yet, you could just apply the click handler to the <h3> tag, instead of to the complete <li> element.

    E.g.

    Code JavaScript:
    $('h3').click(function () {
      var text = $(this).nextAll("div.panel");
      if (text.is(':hidden')) {
        text.slideDown('200');
        $(this).children('span').html('-');     
      } else {
        text.slideUp('200');
        $(this).children('span').html('+');     
      }
    });

    BTW, thanks for making such a good, easy to use example to demonstrate your issue. I wish more people did this.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •