Javascript Close and Open

JavaScript
1

Please take a look at the code here: http://jsfiddle.net/qxbschug/3/

I am trying to hide the items when click on the option, for now you u click on the option it open but when you click on it again it does not closes. Please help

2

You didn’t provide any code for keeping any element “closed”.

If I were doing this, I would provide conditionals to detect state (open/closed) then do the opposite of what it currently is.

V/r,

^ _ ^

3

is it possible to help?

4

Actually, I took a closer look. You’re closing ALL options, first, then trying to get the current one to open.

I’m working on an example, now, I’ll post it here when I finish. I’m using jQuery 3.

V/r,

^ _ ^

5

Okay… my assertion was incorrect. LOL!

Try the following:

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-3.2.1.min.js"></script><!-- Replace this with your CDN -->
	</head>
	<body>
		<div id="dropdown-1" class="dropdown dropdown-processed">
		  <a class="dropdown-link" href="javascript:void(0);">Options</a><!-- The hashtag reloads the page.  Don't use it. -->
		  <div class="dropdown-container">
			<ul>
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
		  </div>
		</div>
		
		<div id="dropdown-2" class="dropdown dropdown-processed">
		  <a class="dropdown-link" href="javascript:void(0);">Options</a>
		  <div class="dropdown-container">
			<ul>
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
		  </div>
		</div>
		
		<div id="dropdown-3" class="dropdown dropdown-processed">
		  <a class="dropdown-link" href="javascript:void(0);">Options</a>
		  <div class="dropdown-container">
			<ul>
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
		  </div>
		</div>
		<script>
				$(".dropdown-container").slideUp();
				$(".dropdown-link").click(function(){
					$(this).next('.dropdown-container').toggle();				
				});
		</script>
	</body>
</html>

This should work fine.

HTH,

^ _ ^

6

BTW… if you put your JS/jQuery code before the closing html tag, you don’t need $(document).ready();.

V/r,

^ _ ^

7

An EVEN BETTER one, because I think you wanted all but the currently clicked to close, then leave the one clicked to open or close. (Or am I overthinking this?)

<!DOCTYPE html>
<html>
	<head>
		<script src="jquery-3.2.1.min.js"></script>
	</head>
	<body>
		<div id="dropdown-1" class="dropdown dropdown-processed">
		  <a class="dropdown-link" href="javascript:void(0);">Options</a><!-- The hashtag reloads the page.  Don't use it. -->
		  <div class="dropdown-container">
			<ul>
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
		  </div>
		</div>
		
		<div id="dropdown-2" class="dropdown dropdown-processed">
		  <a class="dropdown-link" href="javascript:void(0);">Options</a>
		  <div class="dropdown-container">
			<ul>
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
		  </div>
		</div>
		
		<div id="dropdown-3" class="dropdown dropdown-processed">
		  <a class="dropdown-link" href="javascript:void(0);">Options</a>
		  <div class="dropdown-container">
			<ul>
			  <li>Item 1</li>
			  <li>Item 2</li>
			  <li>Item 3</li>
			</ul>
		  </div>
		</div>
		<script>
				$(".dropdown-container").slideUp();
				$(".dropdown-link").click(function(){
					$(".dropdown-container").not($(this).next(".dropdown-container")).slideUp('slow');
					$(this).next('.dropdown-container').toggle('slow');				
				});
		</script>
	</body>
</html>
1 Like
8

Thanks brother, works perfect :slight_smile: Appreciate the help

1 Like
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.