Jquery help ASAP pls

Hello,

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.

Hi,

Welcome to the forums. :slight_smile:

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.

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:


<!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?

Hello,

Thanks guys for your help. That code works great also. I have 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>
<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>

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:

$('#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.

<!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.

Hi Hardeepkgill88,

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

Thanks Pullo, I’m in danger of learning something with your help.:slight_smile:

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


<script type="text/javascript">
      (function(){
        var $docs = $("#docs > div");
      [B]  $("ul.buttons").on("click", "li", function(e){[/B]
            $docs.hide();
            var el = $([B]this[/B]).data("show");
            $(el).show();
        });
      })()
    </script>

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 :slight_smile:

Thanks Pullo.:slight_smile:

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?

Using Pullo’s method on your html you’d have something like this:


<!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.

Thank you very much Paul and Pullo :slight_smile: for your help. It works perfectly fine !!! I just know basic jquery not advance like you guys. Thanks a ton !!! :slight_smile:

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:

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 :slight_smile:

Thanks for the clarification Pullo - it will take me some time to digest :slight_smile: