SitePoint Sponsor

User Tag List

Results 1 to 12 of 12
  1. #1
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Ludhiana, India
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    jquery help ASAP pls

    Hello,

    http://pastebin.com/THzvN8eQ

    In this, when i click on "button1" class name, then other button 2 to 18 would be hidden.
    when i click on "button2" class name, then other button 3 to 18 and button1 would be hidden.


    I need this code in for loops. Can some one provide me this. I would be grateful to that person.

    Thanks in Advance.

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

    Welcome to the forums.

    Can you provide the HTML to go with this please (i.e. buttons 1 - 19 or whatever).
    Shouldn't be too difficult to do.

    Also, you can post the code here. No need to use pastebin for something as simple as that.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Hi,

    Just practising my jquery (so wait for Pullo's proper answer when you have posted the correct html) but your code seems to suggest a structure like this:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>Untitled Document</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <style type="text/css">
    .buttons {
    	margin:0;
    	padding:0;
    	list-style:none
    }
    .buttons li {
    	border-radius:4px;
    	display:inline-block;
    	padding:5px 20px;
    	margin:0 10px 20px 0;
    	background:#f9f9f9;
    	border:1px solid #ddd;
    	cursor:pointer;
    	box-shadow:0 0 4px rgba(0, 0, 0, 0.1)
    }
    .buttons li:hover {
    	background:#666;
    	color:#fff;
    }
    </style>
    </head>
    
    <body>
    <ul class="buttons">
    		<li>Button1</li>
    		<li>Button2</li>
    		<li>Button3</li>
    		<li>Button4</li>
    		<li>Button5</li>
    		<li>Button6</li>
    		<li>Button7</li>
    		<li>Button8</li>
    		<li>Button9</li>
    		<li>Button10</li>
    		<li>Button11</li>
    		<li>Button12</li>
    		<li>Button13</li>
    		<li>Button14</li>
    		<li>Button15</li>
    		<li>Button16</li>
    		<li>Button17</li>
    		<li>Button18</li>
    		<li>Show All</li>
    </ul>
    <div id="docs">
    		<div class="docs_main1">
    				<p>Docs_main1 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main2">
    				<p>Docs_main2 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main3">
    				<p>Docs_main3 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main4">
    				<p>Docs_main4 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main5">
    				<p>Docs_main5 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main6">
    				<p>Docs_main6 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main7">
    				<p>Docs_main7 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main8">
    				<p>Docs_main8 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main9">
    				<p>Docs_main9 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main10">
    				<p>Docs_main10 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main11">
    				<p>Docs_main11 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main12">
    				<p>Docs_main12 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main13">
    				<p>Docs_main13 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main14">
    				<p>Docs_main14 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main15">
    				<p>Docs_main15 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main16">
    				<p>Docs_main16 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main17">
    				<p>Docs_main17 - lorem ipsum dolor sit amet ...</p>
    		</div>
    		<div class="docs_main18">
    				<p>Docs_main18 - lorem ipsum dolor sit amet ...</p>
    		</div>
    </div>
    <script type="text/javascript">
    $('.buttons li').click(function(){
    	$('#docs > div').hide();
    	var currentClick = $(this).index()+1; 	
    	if (currentClick == $('.buttons li').length){
    		$('#docs > div').show();	
    	} else {
    		$('.docs_main' + currentClick).show();		
    	}
    }); 
    </script>
    </body>
    </html>
    I'm sure there's a better (more robust) way to do this?

  4. #4
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Ludhiana, India
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hello,

    Thanks guys for your help. That code works great also. I have this code.

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <script>
    $(".button").click(function (event) {
    		for ( var i = 1; i <= 20; i++ ) {
    			if($(".button").hasClass('button'+i)){
    				//alert(  i );
    				 if($(event.target).is('.button'+i)) {
    					 //alert('yes');
    					 $('.docs_main'+i).fadeToggle("slow");
    					 
    				 }
    			}
    	}
      });
    $(document).ready(function(){
    	$('.button1').click(function(){
    		$('.docs_main2,.docs_main3,.docs_main4,.docs_main5,.docs_main6,.docs_main7,.docs_main8,.docs_main9,.docs_main10,.docs_main11,.docs_main12,.docs_main13,.docs_main14,.docs_main15,.docs_main16,.docs_main17,.docs_main18,.docs_main19').fadeOut("slow");
    	});
    	$('.button2').click(function(){
    		$('.docs_main1,.docs_main3,.docs_main4,.docs_main5,.docs_main6,.docs_main7,.docs_main8,.docs_main9,.docs_main10,.docs_main11,.docs_main12,.docs_main13,.docs_main14,.docs_main15,.docs_main16,.docs_main17,.docs_main18,.docs_main19').fadeOut("slow");
    	});
    	$('.button3').click(function(){
    		$('.docs_main2,.docs_main1,.docs_main4,.docs_main5,.docs_main6,.docs_main7,.docs_main8,.docs_main9,.docs_main10,.docs_main11,.docs_main12,.docs_main13,.docs_main14,.docs_main15,.docs_main16,.docs_main17,.docs_main18,.docs_main19').fadeOut("slow");
    	});
    });	
    </script>
    </head>
    
    <body>
    <div class="folders">
              	<!-- First Row Starts -->
              	<ul>
                	<li>
                    	<span><strong>September</strong><br />Trainingen 2013</span>
                    	<a class="button button1">&nbsp;</a>
                        <a href="#" class="mobile_link">&nbsp;</a>
                    </li>
                    <li>
                    	<span><strong>Augustus</strong><br />Trainingen 2013</span>
                    	<a class="button button2">&nbsp;</a>
                        <a href="#" class="mobile_link">&nbsp;</a>
                    </li>
                    <li>
                    	<span><strong>Juli</strong><br />Trainingen 2013</span>
                    	<a class="button button3">&nbsp;</a>
                        <a href="#" class="mobile_link">&nbsp;</a>
                    </li>
                    <li>
                    	<span><strong>Juni</strong><br />Trainingen 2013</span>
                    	<a class="button button4">&nbsp;</a>
                        <a href="#" class="mobile_link">&nbsp;</a>
                    </li>
                    <li>
                    	<span><strong>Mei</strong><br />Trainingen 2013</span>
                    	<a class="button button5">&nbsp;</a>
                        <a href="#" class="mobile_link">&nbsp;</a>
                    </li>
                    <li class="last">
                    	<span><strong>April</strong><br />Trainingen 2013</span>
                    	<a class="button button6">&nbsp;</a>
                        <a href="#" class="mobile_link">&nbsp;</a>
                    </li>
                </ul>
                <!-- First Row Ends -->
                <div class="docs_main docs_main1">
                	<img src="images/up_arrow.png" alt="" class="up_arrow" />
                    <div class="auto">
                        <div class="search">
                            <form action="#">
                            	<input type="text" value="" />
                                <input type="submit" value="" class="submit" />
                            </form>
                        </div>
                    </div>
                </div>
                <div class="docs_main docs_main2">
                	<img src="images/up_arrow.png" alt="" class="up_arrow" />
                    <div class="auto">
                        <div class="search">
                            <form action="#">
                            	<input type="text" value="" />
                                <input type="submit" value="" class="submit" />
                            </form>
                        </div>
                    </div>
                </div>
                <div class="docs_main docs_main3">
                	<img src="images/up_arrow.png" alt="" class="up_arrow" />
                    <div class="auto">
                        <div class="search">
                            <form action="#">
                            	<input type="text" value="" />
                                <input type="submit" value="" class="submit" />
                            </form>
                        </div>
                    </div>
                </div>
    	 </div>
    </body>
    </html>

  5. #5
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Just practising my jquery (so wait for Pullo's proper answer when you have posted the correct html) but your code seems to suggest a structure like this:
    That's exactly how I would have done it, Paul.
    Catch the click, hide all of the divs, then work out what should be displayed according to what was clicked.

    You could write it a little more compact:

    Code JavaScript:
    $('#docs > div').hide();
    var el = ($(this).is(':last-child')) ? '#docs > div' : '.docs_main' + ($(this).index()+1);
    $(el).show();
    but your version your version is more readable, so I would go with that.

    The only other thing I could think of to improve upon would be to store the name of the element to be displayed upon click as a data attribute on the <li> elements. This gives you a little more flexibility with the structure of your HTML.

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>Show hide buttons</title>
        <style type="text/css">
          .buttons {
            margin:0;
            padding:0;
            list-style:none
          }
          .buttons li {
            border-radius:4px;
            display:inline-block;
            padding:5px 20px;
            margin:0 10px 20px 0;
            background:#f9f9f9;
            border:1px solid #ddd;
            cursor:pointer;
            box-shadow:0 0 4px rgba(0, 0, 0, 0.1)
          }
          .buttons li:hover {
            background:#666;
            color:#fff;
          }
        </style>
      </head>
      
      <body>
        <ul class="buttons">
          <li data-show=".docs_main1">Button1</li>
          <li data-show=".docs_main2">Button2</li>
          <li data-show=".docs_main3">Button3</li>
          <li data-show=".docs_main4">Button4</li>
          <li data-show=".docs_main5">Button5</li>
          <li data-show=".docs_main6">Button6</li>
          <li data-show=".docs_main7">Button7</li>
          <li data-show=".docs_main8">Button8</li>
          <li data-show=".docs_main9">Button9</li>
          <li data-show=".docs_main10">Button10</li>
          <li data-show=".docs_main11">Button11</li>
          <li data-show=".docs_main12">Button12</li>
          <li data-show=".docs_main13">Button13</li>
          <li data-show=".docs_main14">Button14</li>
          <li data-show=".docs_main15">Button15</li>
          <li data-show=".docs_main16">Button16</li>
          <li data-show=".docs_main17">Button17</li>
          <li data-show=".docs_main18">Button18</li>
          <li data-show="#docs > div">Show All</li>
        </ul>
        
        <div id="docs">
          <div class="docs_main1">
            <p>Docs_main1 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main2">
            <p>Docs_main2 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main3">
            <p>Docs_main3 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main4">
            <p>Docs_main4 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main5">
            <p>Docs_main5 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main6">
            <p>Docs_main6 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main7">
            <p>Docs_main7 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main8">
            <p>Docs_main8 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main9">
            <p>Docs_main9 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main10">
            <p>Docs_main10 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main11">
            <p>Docs_main11 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main12">
            <p>Docs_main12 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main13">
            <p>Docs_main13 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main14">
            <p>Docs_main14 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main15">
            <p>Docs_main15 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main16">
            <p>Docs_main16 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main17">
            <p>Docs_main17 - lorem ipsum dolor sit amet ...</p>
          </div>
          <div class="docs_main18">
            <p>Docs_main18 - lorem ipsum dolor sit amet ...</p>
          </div>
        </div>
        
        <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script>
        <script type="text/javascript">
          (function(){
            var $docs = $("#docs > div");
            $("ul.buttons").on("click", function(e){
              if(e.target && e.target.nodeName == "LI"){
                $docs.hide();
                var el = $(e.target).data("show");
                $(el).show();
              }
            });
          })()
        </script>
      </body>
    </html>
    Actually, another thing that I might do a little differently on reflection is as follows:

    Rather than attach separate event listeners to all of the <li> elements, I would attach one single event listener to the parent <ul> element. Then when the click event bubbles up to the <ul> element, you check the event object's target property to gain a reference to the actual node which was clicked.

    This approach has the advantage of being much easier to maintain, for example if <li> elements are frequently added and removed from the list.

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Hi Hardeepkgill88,

    Does this answer your question, or is there anything else you would like help with?

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    That's exactly how I would have done it, Paul.
    Actually, another thing that I might do a little differently on reflection is as follows:

    Rather than attach separate event listeners to all of the <li> elements, I would attach one single event listener to the parent <ul> element. Then when the click event bubbles up to the <ul> element, you check the event object's target property to gain a reference to the actual node which was clicked.

    This approach has the advantage of being much easier to maintain, for example if <li> elements are frequently added and removed from the list.
    Thanks Pullo, I'm in danger of learning something with your help.

    I looked at the documentation for on() and wondered if we could do away with the if/else structure and use this instead?

    Code:
    <script type="text/javascript">
          (function(){
            var $docs = $("#docs > div");
            $("ul.buttons").on("click", "li", function(e){
                $docs.hide();
                var el = $(this).data("show");
                $(el).show();
            });
          })()
        </script>
    Or is there some subtlety that I'm missing?

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    I looked at the documentation for on() and wondered if we could do away with the if/else structure and use this instead?
    Or is there some subtlety that I'm missing?
    Oh yes, nice one!
    By specifying an additional selector for the click event in this way, we can indeed do away with the if/else structure.
    I think I just had my "no jQuery" head on

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Pullo View Post
    Oh yes, nice one!
    By specifying an additional selector for the click event in this way, we can indeed do away with the if/else structure.
    I think I just had my "no jQuery" head on
    Thanks Pullo.

    One last question and sorry to hijack the thread (although it is pertinent).

    Why the need to check:

    e.target && e.target.nodeName == "LI" ?

    Wouldn't e.target.nodeName == "LI" work by itself?


    Quote Originally Posted by Hardeepkgill88
    Thanks guys for your help. That code works great also. I have this code.
    Using Pullo's method on your html you'd have something like this:

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Untitled Document</title>
    <style typer="text/css">
    ul.buttons li{cursor:pointer}
    </style>
    </head>
    
    <body>
    <div class="folders"> 
    		<!-- First Row Starts -->
    		<ul class="buttons">
    				<li data-show=".docs_main1"> <span><strong>September</strong><br />
    						Trainingen 2013</span> <a class="button">button&nbsp;</a> <a href="#" class="mobile_link">&nbsp;</a> </li>
    				<li data-show=".docs_main2"> <span><strong>Augustus</strong><br />
    						Trainingen 2013</span> <a class="button">button&nbsp;</a> <a href="#" class="mobile_link">&nbsp;</a> </li>
    				<li  data-show=".docs_main3"> <span><strong>Juli</strong><br />
    						Trainingen 2013</span> <a class="button">button&nbsp;</a> <a href="#" class="mobile_link">&nbsp;</a> </li>
    				<li data-show=".docs_main4"> <span><strong>Juni</strong><br />
    						Trainingen 2013</span> <a class="button">button&nbsp;</a> <a href="#" class="mobile_link">&nbsp;</a> </li>
    				<li data-show=".docs_main5"> <span><strong>Mei</strong><br />
    						Trainingen 2013</span> <a class="button">&nbsp;</a> <a href="#" class="mobile_link">&nbsp;</a> </li>
    				<li  data-show=".docs_main1" class="last"> <span><strong>April</strong><br />
    						Trainingen 2013</span> <a class="button">&nbsp;</a> <a href="#" class="mobile_link">&nbsp;</a> </li>
    		</ul>
    		<!-- First Row Ends -->
    		<div id="docs">
    				<div class="docs_main docs_main1"> <img src="images/up_arrow.png" alt="" class="up_arrow" />
    						<div class="auto">
    								<div class="search">
    										<form action="#">
    												<input type="text" value="1" />
    												<input type="submit" value="" class="submit" />
    										</form>
    								</div>
    						</div>
    				</div>
    				<div class="docs_main docs_main2"> <img src="images/up_arrow.png" alt="" class="up_arrow" />
    						<div class="auto">
    								<div class="search">
    										<form action="#">
    												<input type="text" value="2" />
    												<input type="submit" value="" class="submit" />
    										</form>
    								</div>
    						</div>
    				</div>
    				<div class="docs_main docs_main3"> <img src="images/up_arrow.png" alt="" class="up_arrow" />
    						<div class="auto">
    								<div class="search">
    										<form action="#">
    												<input type="text" value="3" />
    												<input type="submit" value="" class="submit" />
    										</form>
    								</div>
    						</div>
    				</div>
    		</div>
    </div>
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script type="text/javascript">
          (function(){
            var $docs = $("#docs > div");
            $("ul.buttons").on("click", "li", function(e){
                $docs.hide();
                var el = $(this).data("show");
                $(el).fadeIn();
            });
          })()
        </script>
    </body>
    </html>
    That assumes the whole list item is the trigger for the action you wanted.

  10. #10
    SitePoint Member
    Join Date
    Sep 2013
    Location
    Ludhiana, India
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you very much Paul and Pullo for your help. It works perfectly fine !!! I just know basic jquery not advance like you guys. Thanks a ton !!!

  11. #11
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    5,358
    Mentioned
    179 Post(s)
    Tagged
    9 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    One last question and sorry to hijack the thread (although it is pertinent).

    Why the need to check:

    e.target && e.target.nodeName == "LI" ?

    Wouldn't e.target.nodeName == "LI" work by itself?
    Short answer:
    I read something about this recently, looked up the post and copied the code.
    Original article here: http://davidwalsh.name/event-delegate

    Long(er) answer:
    Defensive programming, I guess.
    Earlier versions of IE don't support the target property on the event object (preferring srcElement instead), so by checking if the target property exists, these browsers will fail gracefully (i.e. do nothing).
    To be truly backwards compatible, we'd have to do something like this:
    Code JavaScript:
    var target = (e.target) ? e.target : e.srcElement;
    if(target.nodeName == "LI"){
      var el = $(target).data("show");
      $docs.hide();
      $(el).show();
    }

    Yet another way that jQuery has your back

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,877
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Thanks for the clarification Pullo - it will take me some time to digest


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
  •