Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts

    Question Toggle a certain div tag up or down. (i have the code, but have to edit something)

    I followed a tutorial on a forum on how to slide a div tag up or down using jquery.

    It is working but i don't know how to tell the code to slide a certain div tag... right now it seems like it only slides a random element beside it...

    Code:
    Code:
    	<script type="text/javascript">
    	$(document).ready(function() {
    	    $(".togglecats").click(function() {
    		    $(this).next().slideToggle(400);
    		},
    		function() {
    		    $(this).next().slideToggle(400);
    		});
    	});
    	</script>
    The button i click when i want to slide the div tag has the class ".togglecats". And the element that i want to slide has the class "header-cats"

    Oh and btw: i did post this in the right category, right?

    Thanks in advance.
    -Nike



    EDIT:
    I experimented a little bit with it and i found out that if i use the code below, it slides.
    Code:
    	<script type="text/javascript">
    	$(document).ready(function() {
    	    $(".togglecats").click(function() {
    		    $(".header-cats").next().slideToggle(700);
    		},
    		function() {
    		    $(".header-cats").next().slideToggle(700);
    		});
    	});
    	</script>
    But, it isn't sliding correctly. It slides the element below itself.

    Any help appreciated.



    Here's the HTML code:
    Code:
        <div class="header-menu">
            <ul>
                <li>Page one</li>
                <li>Page two</li>
                <li>Page three</li>
                <li>Page four</li>
    
                <li class="togglecats" style="float: right !important;"><a href="#">Categories</a></li>
            </ul>
        </div> <!-- End header-menu -->
        
        <div class="header-cats" id="cats" style="display: none;">
           <ul>
               <li>Category one</li>
               <li>Category two</li>
               <li>Category three</li>
               <li>Category four...</li>
           </ul>
        </div>
    Last edited by najkiie; 05-04-2009 at 06:53 PM.
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.

  • #2
    Regular Coder Iszak's Avatar
    Join Date
    Jun 2007
    Location
    Perth, Western Australia
    Posts
    332
    Thanks
    2
    Thanked 58 Times in 57 Posts
    Firstly, yes is this is the correct section but you should prefix the framework to the front as seen here http://www.codingforums.com/showthread.php?t=161138

    Okay so I'm kinda confused, you want it so when someone clicks the list item with the class "togglecats" it's to slide down/up the div with the id "cats" or class "header-cats"?

    It's go something like..
    Code:
    $(function(){
      $('.clickClass').click(function(){
        $('.slideClass').slideToggle(400);
      });
    });
    But if this is a once off thing, so only one element is going to have the click listener and only one element is going to be slide up or down then use an id.

  • #3
    New to the CF scene
    Join Date
    May 2009
    Posts
    1
    Thanks
    0
    Thanked 1 Time in 1 Post
    Try removing the .next()

    Code:
    	<script type="text/javascript">
    	$(document).ready(function() {
    	    $(".togglecats").click(function() {
    		    $(".header-cats").slideToggle(700);
    		},
    		function() {
    		    $(".header-cats").slideToggle(700);
    		});
    	});
    	</script>

  • Users who have thanked rickdog for this post:

    najkiie (05-05-2009)

  • #4
    Regular Coder najkiie's Avatar
    Join Date
    Oct 2008
    Location
    Sweden
    Posts
    103
    Thanks
    7
    Thanked 0 Times in 0 Posts
    Iszak, yes that's exactly how i want it. But i tried using your code, it didn't move at all. :/

    Rickdog, well, that was easy? It works perfectly now, it slides both up and down. And it toggles the right element too


    Thanks for the help guys, really appreciate it. This is the first time i've ever used jquery, it seems pretty cool. And it looks like it doesn't require much code for cool effects either. (what is it? like 7 lines?)

    -Nike
    -Nike - PTS - Blubbz
    I would love to change the world, but they won't give me the source code.


  •  

    Posting Permissions

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