Java Script CONFLICT

**harry08** · 09-09-2011, 10:26 AM

I am trying to add 2 scripts but they all open at the same time,
please help, I have mentioned the example below.

<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Open/Close</button>

<p style="display: none">Select :Test 1</p>
<script>
$("button").click(function () {
$("p").slideToggle("slow");
});
</script>

</body>
</html>
-------------------------------------------------------------------------------------

<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Open/Close</button>

<p style="display: none">Select :Test 1</p>
<script>
$("button").click(function () {
$("p").slideToggle("slow");
});
</script>

</body>
</html>

**jscheuer1** · 09-09-2011, 11:04 AM

As far as I can tell those are 2 separate pages with identical code. Anyways, use unique id's instead of the tag names.

If you want more help:

Please post a link to a page on your site that contains the problematic code so we can check it out.

**FrickenTrevor** · 09-12-2011, 04:37 AM

Originally Posted by jscheuer1

Anyways, use unique id's instead of the tag names.

Actually I took a crack at this and added some unique id's.. but they don't work (figures)

Code:

<!DOCTYPE html>
<html>
<head>
<style>
p { width:400px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>

<button>Open/Close</button>

<p id="toggle1" style="display: none">Select :Test 1</p>
<script>
$("button").click(function () {
$("toggle1").slideToggle("slow");
});
</script>

<!-- This just adds space between the two buttons -->
<br /><br /><br /><br /><br /><br /><br />

<button>Open/Close</button>
<p id="toggle2" style="display: none">Select :Test 1</p>
<script>
$("button").click(function () {
$("toggle2").slideToggle("slow");
});
</script>


</body>
</html>

**jscheuer1** · 09-12-2011, 06:03 AM

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p { width: 400px; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<button>Open/Close</button>
<p id="toggle1" style="display: none">Select :Test 1</p>
<script>
$("button").eq(0).click(function () {
$("#toggle1").slideToggle("slow");
});
</script>
<br /><br /><br /><br /><br /><br /><br /><!-- This just adds space between the two buttons -->
<button>Open/Close</button>
<p id="toggle2" style="display: none">Select :Test 1</p>
<script>
$("button").eq(1).click(function () {
$("#toggle2").slideToggle("slow");
});
</script>
</body>
</html>

Or even:

Code:

<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
p { width: 400px; display: none; }
</style>
<noscript>
<style type="text/css">
p { display: block; }
</style>
</noscript>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script>
jQuery(function($){
	$('button').click(function(){
		$(this).next('p').slideToggle('slow');
	});
});
</script>
</head>
<body>
<button>Open/Close</button>
<p id="toggle1">Select :Test 1</p>
<br /><br /><br /><br /><br /><br /><br /><!-- This just adds space between the two buttons -->
<button>Open/Close</button>
<p id="toggle2">Select :Test 1</p>
</body>
</html>

Thread: Java Script CONFLICT

Thread Tools

Search Thread

Java Script CONFLICT

Bookmarks

Bookmarks

Posting Permissions