I'm trying to build a dynamic dropdown menu following http://labs.abeautifulsite.net/jquery-dropdown/
So my code is:
<html>
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<p>
Here’s a link
and here’s a button <input type="button" value="Dropdown" data-dropdown="#dropdown-1" class="">
and here’s a <span class="example" data-dropdown="#dropdown-1">span</span>
</p>
<div id="dropdown-1" class="dropdown dropdown-tip" style="display: block; left: 204.671875px; top: 1373.265625px;">
<ul class="dropdown-menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li class="dropdown-divider"></li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
</ul>
</div>
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
But nothing happens and I really don't understand why.
Download project files and include them in your project. the order of included files is important:
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link type="text/css" rel="stylesheet" href="jquery.dropdown.css" />
<script type="text/javascript" src="jquery.dropdown.js"></script>
Related
I have the following snippet that rotates .caret on a dropdown-toggle click. This rotates the .caret without issue, however it also rotates all of the other .caret on the page. Will I need to write a click function for every individual .caret and .dropdown-toggle on the page or can I have one that works independently?
Also, is there a way in which I can stop the dropdown-menu closing when and item within it has been clicked?
$(document).ready(function() {
$(".dropdown-toggle").click(function() {
$(".caret").toggleClass('rotate-180');
});
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
in bootstrap +v4 just add style:
.dropdown-toggle[aria-expanded="true"]:after {
transform: rotate(180deg);
}
/*for animation*/
.dropdown-toggle:after {
transition: 0.7s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
</head>
<body>
<li class="nav-item dropdown" >
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdowns" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdowns">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
<!-- jQuery first, then Tether, then Bootstrap JS. -->
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
</html><!-- roiket -->
See below it works
Edit:
I updated my answer to a more better approach to cover all scenarios, and for the last thing you have asked in your OP about preventing the menu to close, can be done in 2 ways
Bind click event to the dropdown and prevent propagation if it is already open.
You have to remove the data-toggle="dropdown" attribute and implement open and closing of the menu yourself. But I think that would require more lines of code than the one used in the code snippet.
$(document).ready(function() {
$('.dropdown').on('hidden.bs.dropdown', function(e) {
$(this).find('.caret').toggleClass('rotate-180');
});
$('.dropdown').on('shown.bs.dropdown', function(e) {
$(this).find('.caret').toggleClass('rotate-180');
});
//this is to avoid the menu from closing if clicked inside the menu
$('body').on("click", ".dropdown-menu", function(e) {
$(this).parent().is(".open") && e.stopPropagation();
});
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
In bootstrap 3 whenever you click on the dropdown list when it's opening, class="open" appears so I tried this code and it worked just fine!
.open>a>.caret{
transform: rotate(180deg);
transition: all ease-out 0.4s;
}
Try this
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function() {
$(this).children(".caret").toggleClass('rotate-180');
});
$( ".dropdown-menu" ).click( function() {
$(this).siblings().children(".caret").toggleClass('rotate-180');
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
$(".caret").removeClass('rotate-180');
}
})
});
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function() {
$(this).children(".caret").toggleClass('rotate-180');
});
$( ".dropdown-menu" ).click( function() {
$(this).siblings().children(".caret").toggleClass('rotate-180');
});
$(document).click(function(e){
if(!e.target.closest("ul") && $(".caret").hasClass("rotate-180")){
$(".caret").removeClass('rotate-180');
}
})
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
Try this.
$(document).ready(function () {
$( ".dropdown-toggle" ).click( function(){
$(this).children(".caret").toggleClass('rotate-180');
});
});
$(document).on("click", function(event){
var $trigger = $(".caret");
if($trigger !== event.target && !$trigger.has(event.target).length){
$(".caret").removeClass('rotate-180');
}
});
ul {
list-style: none;
}
.caret {
-moz-transition: transform 1s;
-webkit-transition: transform 1s;
transition: transform 1s;
}
.rotate-180 {
transform: rotate(-180deg);
}
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="index.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>
<ul>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
<li class="dropdown">
Directories <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</li>
</ul>
</body>
Here is the codepen I'm trying to get working: http://codepen.io/Bounasser-Abdelwahab/pen/ruiky
Here is the head of my index.html file in my Brackets project:
<head>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
</head>
When I try to run this, it runs about 90% correctly, but it's not a complete match. The menu is misaligned, and I can see bullet points that weren't there before, and the padding is all wrong.
How can I get a complete replication of the codepen code into my own project?
Edit: here is an image of how mine is coming out: http://i.imgur.com/F3o0yQF.png
Edit 2:
Here is my slightly modified HTML. Problem is persisting.
<!DOCTYPE html>
<!--
-->
<html lang="en">
<head>
<link type="text/css" rel="stylesheet" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="js/init.js"></script>
</head>
<body>
<ul class="navbar cf">
<li>item 2</li>
<li>item 3
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3
<ul>
<li>google</li>
<li>yahoo!</li>
<li>jQuery
<ul>
<li>sub sub item 1</li>
<li>sub sub item 2
<ul>
<li>sub sub sub item 1</li>
<li>sub sub sub item 2</li>
<li>sub sub sub item 3
<ul>
<li>sub item 1</li>
<li>sub item 2</li>
<li>sub item 3</li>
</ul>
</li>
</ul>
</li>
<li>sub sub item 3</li>
<li>sub sub item 4</li>
<li>sub sub item 5
</li>
</ul>
</li>
</ul>
</li>
<li>item a little longer</li>
</ul>
</li>
<li>item 4</li>
<li>item 5</li>
</ul>
</body>
</html>
Here is the class which will resolve those issues:
`ol, ul { list-style: outside none none; }`
As you asked, another question later on, so adding another answer.
For removing the strange extra space to the left of some boxes,
Add below CSS class:
.body{
//your other class properties ...
padding:0
}
I'm trying to create a simple page where when I click on one tabbed item should let display disappear for that page. In this simple code, when I click on About should let product dropdown menu disappear. Here is the code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Drop Down Navbar</title>
<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="js/bootstrap.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<h3>Bootstrap Dropdown Menu By Creativity-Tuts</h3>
<div class="navbar">
<div class="navbar-inner">
<ul class="nav">
<li>Home</li>
<li>About</li>
</ul>
</div>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#"> Products <b class="caret"></b></a>
<ul class="dropdown-menu">
<li>Prod 1</li>
<li>Prod 2</li>
<li>Prod 3</li>
<li>Prod 4</li>
</ul>
</li>
</div>
</div>
</div>
</div>
</body>
</html>
Am I going use onClick and call a function to hide that drop down menu? Here is the jsfiddle link
add id to «about» link, then use such code:
$('#about').click(function(){
$('.dropdown-menu').hide();
});
I am trying to make jQuery UI widget work in my web application
I got all the files from original demo, and basically did everything I could so the code and files were pretty much the same as in demo version.
And all the time get this error: Uncaught TypeError: Object [object Object] has no method 'uniqueId'
Here is js code:
$(function () {
var date = new Date();
date.setDate(date.getDate() + 1);
$(".calendar", ".add-item").datepicker({
showAnim: "drop",
dateFormat: "yy-dd-mm",
minDate: date
});
$("#bar1").menubar({
position: {
within: $("#demo-frame").add(window).first()
}
});
$(".menubar-icons").menubar({
autoExpand: true,
menuIcon: true,
buttons: true,
position: {
within: $("#demo-frame").add(window).first()
}
});
$("#bar3").menubar({
position: {
within: $("#demo-frame").add(window).first()
},
items: ".menubarItem",
menuElement: ".menuElement"
});
});
Here are included files:
<script src="#Url.Content("~/content/js/jquery-1.7.2.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery-ui-1.8.21.custom.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.dataTables.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.widget.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.position.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.button.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.menu.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.menubar.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.ui.core.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/main.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/content/js/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<link href="#Url.Content("~/content/css/main-admin.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/css/jquery-ui/themes/base/jquery-ui.css")" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/content/css/jquery.dataTables.css")" rel="stylesheet" type="text/css" />
And here is plain html:
<div class="header">
<div class="demo">
<ul id="bar1" class="menubar">
<li>File
<ul>
<li>Open...</li>
<li class="ui-state-disabled">Open recent...</li>
<li>Save</li>
<li>Save as...</li>
<li>Close</li>
<li>Quit</li>
</ul>
</li>
<li>Edit
<ul>
<li>Copy</li>
<li>Cut</li>
<li class="ui-state-disabled">Paste</li>
</ul>
</li>
<li>View
<ul>
<li>Fullscreen</li>
<li>Fit into view</li>
<li>Encoding
<ul>
<li>Auto-detect</li>
<li>UTF-8</li>
<li>UTF-16
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</li>
<li>Customize...</li>
</ul>
</li>
</ul>
<ul id="bar2" class="menubar-icons">
<li>File
<ul>
<li>Open...</li>
<li class="ui-state-disabled">Open recent...</li>
<li>Save</li>
<li>Save as...</li>
<li>Close</li>
<li>Quit</li>
</ul>
</li>
<li>Edit
<ul>
<li>Copy</li>
<li>Cut</li>
<li class="ui-state-disabled">Paste</li>
</ul>
</li>
<li>View
<ul>
<li>Fullscreen</li>
<li>Fit into view</li>
<li>Encoding
<ul>
<li>Auto-detect</li>
<li>UTF-8</li>
<li>UTF-16
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
</ul>
</li>
</ul>
</li>
<li>Customize...</li>
</ul>
</li>
</ul>
<div id="bar3" class="menubar">
<div class="menubarItem">
File
<div class="menuElement">
<div>
Open...</div>
<div class="ui-state-disabled">
Open recent...</div>
<div>
Save</div>
<div>
Save as...</div>
<div>
Close</div>
<div>
Quit</div>
</div>
</div>
<div class="menubarItem">
Edit
<div class="menuElement">
<div>
Copy</div>
<div>
Cut</div>
<div class="ui-state-disabled">
Paste</div>
</div>
</div>
<div class="menubarItem">
View
<div class="menuElement">
<div>
Fullscreen</div>
<div>
Fit into view</div>
<div>
Encoding
<div class="menuElement">
<div class="ui-state-disabled">
Auto-detect</div>
<div>
UTF-8</div>
<div>
UTF-16
<div class="menuElement">
<div>
Option 1</div>
<div>
Option 2</div>
<div class="ui-state-disabled">
Option 3</div>
<div>
Option 4</div>
</div>
</div>
</div>
</div>
<div>
Customize...</div>
</div>
</div>
</div>
</div>
</div>
Remove inclusion of:
<script src="/content/js/jquery-ui-1.8.21.custom.min.js" type="text/javascript"></script>
uniqueId is a new function introduced with jQuery 1.9.x. I assume youre using a dev Widget (aka out of the master branch at GitHub) with jQuery 1.8.x.
It seems to me that you have not included all required source (.js) files. Either that or your URL is wrong.
It may be easier to include just one UI bundle from this page:
http://jqueryui.com/download/
That way you know that you have all required source?
I don't know if this is possible. I have a jquery slidedown menu and I don't want the slider closing when I click one of the links in the slide menu. I want it to remain open when I get to the destination page of the link clicked.
Here's my code: index.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Advice center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip_1").click(function(){
$("#panel_1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.nodisplay{
display:none;
}
</style>
</head>
<body>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li id="flip_1"> <span>Slide here</span></li>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
</body>
</html>
Here's one of the pages linked to section1.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Advice center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip_1").click(function(){
$("#panel_1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.nodisplay{
display:none;
}
</style>
</head>
<body>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li id="flip_1"> <span>Slide here</span></li>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
Welcome to section 1
</body>
</html>
And the third page is below: section2.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Advice center</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#flip_1").click(function(){
$("#panel_1").slideToggle("slow");
});
});
</script>
<style type="text/css">
.nodisplay{
display:none;
}
</style>
</head>
<body>
<ul>
<li>Page 1</li>
<li>Page 2</li>
<li>Page 3</li>
<li>Page 4</li>
<li id="flip_1"> <span>Slide here</span></li>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
<li>bottom 1</li>
<li>bottom 2</li>
</ul>
This is section 2 (TWO) page
</body>
</html>
Try the following if one of your links is clicked (you'll need an if/else in your .click event binding):
$("#panel_1").stop();
On the inner links, use a hash to identify them
Section 1
Then onPageLoad you can check if there's a hash and use this to open:
if(window.location.hash == "#panel") $("#panel_1").slideDown();
Also, a small fix to your code: put that div inside the li
<li id="flip_1"><span>Slide here</span>
<div id="panel_1" class="nodisplay">
<ul>
<li>section 1</li>
<li>section 2</li>
</ul>
</div>
</li>
And then use this to toggle:
$("#flip_1 span").click(function(){
$("#panel_1").slideToggle("slow");
});