Home/ Questions/Q 759777
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-14T15:38:16+00:00

Another jQuery issue… I have tried this several times using class and id elements

  • 0

Another jQuery issue… I have tried this several times using “class” and “id” elements and I can not get it right. I am hoping the brains on stackoverflow can help!

The problem that I am having is when I open the page all of the elements are closed. When I click on one link all links open. I believe it closes correctly the problem is that when I open the first link all items open. 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0     Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bid Items</title>
<link href="bid.css" rel="stylesheet" type="text/css" />
<script src="jquery/js/jquery.js" type="text/javascript"></script>

<script type="text/javascript">


  $(document).ready(function(){ 
  $('#showhideconent').hide(); 
  $('a').click(function(){ 
  $('#showhideconent').show('slow'); 

}); 

 $('a#close').click(function(){ 
        $('#showhideconent').hide('slow'); 
}) 

}); 

 $(document).ready(function(){ 
 $('#showhideconent2').hide(); 
 $('a').click(function(){ 
 $('#showhideconent2').show('slow'); 

}); 

 $('a#close2').click(function(){ 
    $('#showhideconent2').hide('slow'); 
}) 

});  

  $(document).ready(function(){ 
  $('#showhideconent3').hide(); 
  $('a').click(function(){ 
 $('#showhideconent3').show('slow'); 

}); 

 $('a#close3').click(function(){ 
    $('#showhideconent3').hide('slow'); 
}) 

}); 
  $(document).ready(function(){ 
  $('#showhideconent4').hide(); 
  $('a').click(function(){ 
  $('#showhideconent4').show('slow'); 

}); 

 $('a#close4').click(function(){ 
        $('#showhideconent4').hide('slow'); 
}) 

}); 


</script>

</head>

<body class="oneColElsCtr" onload="MM_preloadImages('Assignment4b.jpg')">

<div id="container">
<div id="mainContent">

    <h1>Bid Page</h1>
<h1>Coke Memorbila</h1>




<a href="#" id="click">Amber Bottle 1914</a>
<div id="box" align="center">
<div id="showhideconent">
<p><a href="coke/Amber1914.shtml"><img src="amber1914.jpg" width="200" height="200"    alt="Amber Coke" /></a></p>
<p><a href="#" id="close">Close</a> </p>

</div>
</div>


<a href="#" id="click">Amber Bottle 1915</a>
<div id="box" align="center">
<div id="showhideconent2">
<p><a href="coke/Amber1915.shtml"><img src="coke/Amber1914.shtml" width="200" height="200" alt="Amber Bottle 1915" /></a></p>
<p><a href="#" id="close2">Close</a> </p>


</div>
</div>




<a href="#" id="click">Green 1929</a>
<div id="box" align="center">
<div id="showhideconent3">
<p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
<p><a href="#" id="close3">Close</a> </p>

</div>
</div>


<a href="#" id="click">1970s Cans</a>
<div id="box" align="center">
<div id="showhideconent4">
<p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
<p><a href="#" id="close4">Close</a> </p>


</div>
</div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Michael, see my answer from earlier when you asked about it.

    I re-wrote your HTML and jQuery code to work.

    Problems with show hide jquery

    It is good that you’re not reusing IDs anymore, but you don’t need IDs to assign event handlers when you have consistent repetition like you have.

    EDIT:

    No offense, but it sounds like you just need to pick up a book on jQuery and read a few chapters. You’ll be surprised how easy jQuery is to comprehend when you have a little guidance.

    I didn’t know any jQuery, but after reading a little bit of Learning jQuery I had a good grip on the basic concepts. It only took a couple hours of my time.

    EDIT:

    You can see the repetition here.

    <a href="#" class="click">Green 1929</a>
<div class="box" align="center">
    <div class="showhideconent">
        <p><a href="coke/green1929.shtml"><img src="green1929.jpg" width="200" height="200" alt="Green 1929" /></a></p>
        <p><a href="#" class="close">Close</a> </p>
    </div>
</div>

<a href="#" class="click">1970s Cans</a>
<div class="box" align="center">
    <div class="showhideconent">
        <p><a href="coke/tincans.shtml"><img src="coke_tincan.jpg" width="200" height="200" alt="Tin Cans" /></a></p>
        <p><a href="#" class="close">Close</a> </p>
    </div>
</div>

    First, I changed the a elements so that they have class="click" instead of id="click".

    They are obviously intended to play a similar role, but on different content. Let’s say that there are 20 such sections with a click class. I can assign an event handler to all twenty at once with:

    $('.click').click(function() {
    // Do something.
});

    But, of course, we want each one to only act on the content it is associated with. Also, we need to make sure we are working with the correct one that was clicked. To accomplish this, we use the this keyword. It refers to the element that received the event.

    $('.click').click(function() {
    $(this) // Places the element that was clicked in a jQuery object.
    // Do something.
});

    So now what do we do? Well, it looks like you wanted to use that to show the content. So we need to locate that link’s associated content, and show it.

    $('.click').click(function() {
    $(this).next().find('.showhidecontent').show();
    return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});

    This code almost explains itself. $(this) (the element we clicked) grabs the next() element (the one with class .box) then searches for an element with class .showhidecontent inside of it, then shows it.

    You could do something similar with your .close button. It is even easier since it is inside the .showhidecontent element.

    $('.close').click(function() {
    $(this).closest('.showhidecontent').hide();
    return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
});

    This assigns the function to all elements with .close class. When clicked, the one that was clicked searches for the closest() parent with class .showhidecontent, and then hides it.

    EDIT:

    To put it all together, this code will assign the proper events to all the repeating sections, as long as you fix the classes. (You can pretty much ditch the IDs)

    $(document).ready(function() {
    $('.showhidecontent').hide();  // Hide all the showhidecontent class elements

        // Assign click event handler to all .click class elements
    $('.click').click(function() {
        $(this).next().find('.showhidecontent').show();
        return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
    });

        // Assign click event handler to all .close class elements
    $('.close').click(function() {
        $(this).closest('.showhidecontent').hide();
        return false;  // This return statement can be used to disable the default behavior of the link. Sometimes necessary
    });
});

    Hope this helps. jQuery is designed to be very readable, but you need to learn the basics first (just like in anything you do).

    • 0