Log in

View Full Version : 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
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)





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


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