Results 1 to 4 of 4

Thread: Java Script CONFLICT

  1. #1
    Join Date
    Sep 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Smile Java Script CONFLICT

    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>

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Aug 2009
    Location
    utf-8
    Posts
    205
    Thanks
    4
    Thanked 7 Times in 7 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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>

  4. #4
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •