Jquery show-hide box problem,please help

I have 5 box input text data with show & hide button for each box .
I have no problem with the first and two video boxes when click on the show button, but when click the third show button which is for BENEFIT box then the first box for video is opening .
the only button which is working fine is the last button for the BENEFIT section button.

Can some one please tell me whay is the problem,,,sorry to say I am completely idiot and no skill for this .would be much appreciated if you show the problem here with code.
Thanks...below is the code with function :
------------------------------------------------------------------------
function show_box(id)
{
if(id=="video1")
{
document.getElementById("1").innerHTML="<img src='hide.PNG' id='video1' onclick='javascript:hide_box(this.id);' alt='Click to hide &quot;Benefit #1&quot; setting' />";
document.getElementById("box1").style.display="block";
}
if(id=="video2")
{
document.getElementById("2").innerHTML="<img src='hide.PNG' id='video2' onclick='javascript:hide_box(this.id);' alt='Click to hide &quot;Benefit #2&quot; setting' />";
document.getElementById("box2").style.display="block";




function hide_box(id)
{
if(id=="video1")
{
document.getElementById("1").innerHTML="<img src='show.PNG' id='video1' onclick='javascript:show_box(this.id);' alt='Click to edit &quot;Benefit #1&quot; setting' />";
document.getElementById("box1").style.display="none";
}
if(id=="video2")
{
document.getElementById("2").innerHTML="<img src='show.PNG' id='video2' onclick='javascript:show_box(this.id);' alt='Click to edit &quot;Benefit #2&quot; setting' />";
document.getElementById("box2").style.display="none";
}


----------------------------------------------------------------------------------


<tr bgcolor="#CCCCCC">

<td width="271" align="right"><b>YouTube Video Snippet #1</b> (Optional)<b>:</b>&nbsp;</td>

<td width="469" valign="top">

<span id="1"><img src="show.PNG" id="video1" onclick="javascript:show_box(this.id);" alt="Click to edit &quot;YouTube Video Snippet #1&quot; setting" /></span><img align="right" src="help.png" alt="Help" onclick="javascript:help_box();" />

<div id="box1" style="display:none;"><textarea name="youtube1" rows="8" cols="39" style="overflow:hidden;"><?php echo $row2["youtube1"];?></textarea></div>

</td>

</tr>

<tr bgcolor="">

<td width="271" align="right"><b>YouTube Video Snippet #2</b> (Optional)<b>:</b>&nbsp;</td>

<td width="469">

<span id="2"><img src="show.PNG" id="video2" onclick="javascript:show_box(this.id);" alt="Click to edit &quot;YouTube Video Snippet #2&quot; setting" /></span><img align="right" src="help.png" alt="Help" onclick="javascript:help_box();" />

<div id="box2" style="display:none;"><textarea name="youtube2" rows="8" cols="39" style="overflow:hidden;"><?php echo $row2["youtube2"];?></textarea></div>

</td>

</tr>

<tr bgcolor="#CCCCCC">
<td width="272" align="right"><b>Benefit # 1:</b>&nbsp;</td>
<td width="468">
<span id="1"><img src="show.PNG" id="video1" onclick="javascript:show_box(this.id);" alt="Click to edit &quot;Benefit #1&quot; setting" /></span><img align="right" src="help.png" alt="Help" onclick="javascript:help_box();" />
<div id="box1" style="display:none;"><textarea name="benefit1" rows="8" cols="39" style="overflow:hidden;"><?php echo $row2["benefit1"];?></textarea></div>
</td>
</tr>
<tr bgcolor="">
<td width="272" align="right"><b>Benefit # 2:</b>&nbsp;</td>
<td width="468">
<span id="2"><img src="show.PNG" id="video2" onclick="javascript:show_box(this.id);" alt="Click to edit &quot;Benefit #2&quot; setting" /></span><img align="right" src="help.png" alt="Help" onclick="javascript:help_box();" />
<div id="box2" style="display:none;"><textarea name="benefit2" rows="8" cols="39" style="overflow:hidden;"><?php echo $row2["benefit2"];?></textarea></div>
</td>
</tr>
<tr bgcolor="#CCCCCC">
<td width="272" align="right"><b>Benefit # 3:</b>&nbsp;</td>
<td width="468">
<span id="3"><img src="show.PNG" id="video3" onclick="javascript:show_box(this.id);" alt="Click to edit &quot;Benefit #3&quot; setting" /></span><img align="right" src="help.png" alt="Help" onclick="javascript:help_box();" />
<div id="box3" style="display:none;"><textarea name="benefit3" rows="8" cols="39" style="overflow:hidden;"><?php echo $row2["benefit3"];?></textarea></div>
</td>
</tr>

 

You are missing 2 close brackets }} closing function show_box and one } closing Hide_box.
You cannot use multiple id's with the same name on the page.

Use class for multiples that have the same properties or use different named id.

Hope that helps.

 

Alexstorm, Thanks for your reply...I tried many ways but getting no result.
If you dont mind,could please out line an example how it would be like for Benefit1 box as you mentioned.

Thanks

 

I think you should change your code design approach:

1) Create a .css file for your page.
2) Assign box1 display:none;

#box1 {

    display:none;
    height:300px;
    width:400px;
    border:gray 2px solid;
    }

#benefit-box1 {

    display:none;
    position:relative;
    top:200px;
    margin-top:-200px;
    height:300px;
    width:400px;
    border:green 2px solid;
    }

Code (JavaScript):

​

3) Change all your document.getElement to jQuery actions to change the css and animation for each div. Then you can add anything you want to change at the same time. There are ways to delay single line actions or delay an entire group of actions, by wrapping them in a Timeout that is inside a .click(function(). This delays everything inside the setTimeout for 1.9 seconds.

setTimeout(function() {

   $("#1,#2) [some action],
   $("#3,#4) [some other action],
   }, 1900);

}

Code (JavaScript):

​

Your code: document.getElementById("box1").style.display="block";

becomes:

$("#1").click(function() {
     $("#box1, #benefit-box1").css("display","block"),
     $("#benefit-box1").text("Thank you"),
     $("#benefit-box1").delay(500).show("slide", {direction: "down" }, 1000 );
  });

Code (JavaScript):

You set up the default look of the page in your .css file and then change any div you want in any way all at once with each click. Remember also, there should only be one instance of each id in the document. You cannot have two references to id=box1. Just call each box with a different id and move them around, however you like with the group of jQuery actions. Notice, that actions can be separated with a comma at the end of the line, but the last one has to have a ;

Delays and grouping actions inside a setTimeout help make the page work correctly. You will quickly start to find out the issue with coding jQuery directly, is that you have to start to consider every possibility and code for it. What happens if box 1 and 2 are open? Do you wish to close one first? Close them both to make room? Delay the benefit box from opening immediately? There are other libraries of jQuery plug-ins that help get around some of this. Try and learn direct jQuery action coding first.

Hope that helps.

 

Alex ,Thanks Alot...Great Information....I'll go with your direction to see what I can do .

 

Just saw two errors in the code above to update:

Forgot the close quote in this code and put a semi colon at the end of the last action inside the setTimeout. I intentionally group two ID's in each action just to show you it's possible. You can select only one id and perform an action or many.

setTimeout(function() {

   $("#1, #2") [some action],
   $("#3, #4") [some other action];
   }, 1900);

}

Code (JavaScript):

This setTimeout has to be initiated and you can do that inside of a click action. Then the click performs the first level of action, waits 1900 milliseconds (1.9 seconds) and then does the actions inside the setTimeout. The delay(500) which is .5 second is only for that one action.

$("#1").click(function() {
     $("#box1, #benefit-box1").css("display","block"),
     $("#benefit-box1").text("Thank you"),
     $("#benefit-box1").delay(500).show("slide", {direction: "down" }, 1000 );
        setTimeout(function() {
           $("#1, #2") [some action],
           $("#3, #4") [some other action];
         }, 1900);
  });

Code (JavaScript):

===
In your case, you could also group several divs together as children of a higher div. Then change them all at once for hover, mouseenter, mouseleave or whatever you like. This would make the code a lot easier to handle when you have multiple boxes on the page, like your example.

See: http://stackoverflow.com/questions/2106353/targeting-multiple-elements-with-jquery

The children code demo looks like a good fit. I haven't tried it. It expects pre-made classes in your .css file;

.left
.middle
.right
.hoveroverL
.hoveroverM
.hoveroverR

The Jquery script below then just assigns the new classes for child divs inside a higher div $j in the below example. You mouse over, $j area and classes from css file are assigned: hoveroverL to .left, hoveroverM to .middle, hoverover R to .right

<div id="$j">
  <div class="left">Some text</div>
  <div class="middle">More text</div>
  <div class="right">Text or even and image</div>
</div>

HTML:

You could do some of this with pure CSS, but JQuery lets you do animations, mouseleave and trigger other events.

In the Stackoverflow page:
RAC says: "I had to use the children selector on this, then choose each child and change its individual classes... Here's the code..."

$j(function(){
  $j(".hoverBTN").hover(function(){
    $j(this).children('div:nth-child(1)').addClass("hoveroverL");
    $j(this).children('div:nth-child(2)').addClass("hoveroverM");
    $j(this).children('div:nth-child(3)').addClass("hoveroverR");
    },
   function(){
       $j(this).children('div:nth-child(1)').removeClass("hoveroverL");
        $j(this).children('div:nth-child(2)').removeClass("hoveroverM");
        $j(this).children('div:nth-child(3)').removeClass("hoveroverR");
     });
  });

Code (JavaScript):

===

Finally, here is an advanced JQuery click function that I use to turn the systems on in a starship simulator. It has a lot of the options, so you can see several animations in code, that I know works. I have not yet optimized the code and it's easier to follow more this way. Screenshots of the project are at the bottom of this page: http://www.producerelease.com/sgc/

    // Switch cockpit ON
    // ON Everything that needs to turn on when the start lever is activated
    $(".cp1").click(function() {
            setTimeout(function() {
                // Center yolk buttons
                $("#skym").stop(true,true).slideDown( 1990 ),
                $("#earm").stop(true,true).slideDown( 1990 ),
                $("#skyb").show("slide", {direction: "left" }, 1600 ),
                $("#earb").show("slide", {direction: "left" }, 1600 ),
                $("#moob").delay(800).show("slide", {direction: "left" }, 2800 ),
                $("#marb").delay(800).show("slide", {direction: "left" }, 2800 ),
                $("#mark").delay(2700).show("slide", {direction: "left" }, 2700 ),

                // Slider number center yolk
                $("#mt").delay(2300).show("slide", {direction: "down" }, 3200 ),
                // Keyboard pop-up button
                $("#kbo").delay(800).show("slide", {direction: "down" }, 4600 ),

                // Make sure #kbo button comes back after slidr up   
                // $("#kbo").delay(8500).css("display", "block"),

                // Left grip buttons
                $("#vsw").delay(400).fadeIn(4000),
                $("#vss").delay(1400).fadeIn(4000),
                $("#hlp1").delay(2200).fadeIn(4000),
                $("#hlp2").delay(2500).fadeIn(4000),
               
                // Right grip buttons
                $("#lie").delay(2600).fadeIn(4000),
                $("#aud").delay(2600).fadeIn(4000),

                // Monitor brightness slider center yolk
                $("#slider").css("left","258px"),
                $("#slider").delay(800).show("slide", {direction: "left" }, 3900 ),
                $("#slider" ).slider({"value": 100}),
                $("#slider" ).slider({"range": "max"}),

                // Crash doors (shields) slide away after delay
                  $( "#cdl" ).delay(800).hide("slide", {direction: "left" },2090),
                $( "#cdr" ).delay(800).hide("slide", {direction: "right" },2090),

                // Open button for Sphere Tracking commands in lower right
                $(".reveal").delay(2200).show("slide", {direction: "down" },800);
            }, 1000);

        $('.ui-corner-all').css('background-color','#222'),
        $('.ui-slider-range-min').css('background-color','#7A8CBA'),
        $("#slider").css("display","none"),
        $("#ltop").delay(800).show("slide", {direction: "up" },1200),
        $("#cdo").css("display","none"),
        $("#cdok").css("z-index","-1"),
        $("#cod").css("display","none"),
        $("#cdls").css("display","none"),
        $("#cdrs").css("display","none"),
        $("#cfd").css("display","none"),
        $("#lbuttons").css({"display": "block"}),
        $("#cdf").css("display","block"),
        $("#klev").css("visibility", "visible"),
        $(".bgon").css({"display": "block"}),
        $(".bgon img").css("transform", "scale(" + 1 + ")"),
        $(".bgof").css({"display": "none"}),
        $("#yc").css({"display": "block"}),
        $("p").css({"display": "0"}),
        $(".hide").css({"display": "0"}),
        $(".bwrp").css({"display": "block"});

        // Keyboard guide slide down on click
        $("#kbo").click(function(k){
        $("#kbo2 img").stop(true,true).toggle("slide", {direction: "up" }, 1900 );
        });

    // Highlight Scaler controls when moused over
    $("#slider").on('mouseenter',function(){
        setTimeout(function() {
            $('.ui-corner-all').css('opacity','1'),
            $('.ui-state-default').css('background-image', 'url(i/slider_button01.png)'),
            $('.ui-state-default').css('border', '1px solid #78d389'),
            $('.ui-widget-content').css('border', '1px solid #7A8CBA'),
            $('.ui-slider-range-min').css('background-color','#7A8CBA');
        }, 300);
    });
    // Stop Highlight sliders on mouse leave, after 20 second delay
    $("#slider").on('mouseleave',function(){
        setTimeout(function() {
            // Slider images and colors
            $('.ui-state-default').css('background-image', 'url(i/slider_buttonoff.png)'),
            $('.ui-state-default').css('border', '1px solid gray'),
            $('.ui-widget-content').css('border', '1px solid gray'),
            // Makes the color of the slider go off after 20 seconds  - Cannot separate it from the yolk slider.  Inside JQuery libaryary
            $('.ui-corner-all').css('background-color', '#222'),
            $('.ui-corner-all').css('opacity','.8');
        }, 20000);
    });   

  }); // End of click systems ON
});  // End of 2nd Document Ready area

Code (JavaScript):