Home/ Questions/Q 630833
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-13T19:53:56+00:00

I am just starting to use jQuery, I need to do something that I

  • 0

I am just starting to use jQuery, I need to do something that I am not sure is possible.
I know to use if statements on jQuery is like normal JavaScript but I don’t know how to use the jQuery selectors on a normal if statement.

The function its currently working, but I am having two problems which I don’t know how to fix, (I would assume that it would be with a if statement, but don’t know how).

One problem is that, on container1 this function should not be applied, only with the two images, maximize and minimize should I be able to show and hide this.

Second problem is that the images are meant to show (when maximize is clicked) and hide (when minimize is clicked) the container below, but the function I have conflict with the maximize and minimize functions (which are normal JavaScript and I would like to make the jQuery).

I hope its well explained. Please let me know if you have any questions.

The code would be the following.

   <html>
    <head>
            <script type="text/javascript">
     $(document).ready(function(){
      $(".Header").click(function(){
      $(this).next(" .container").slideToggle("fast");
      });
       });
             </script>
    </head>
    <body>
     <table class="Header">
      <tr>
       <td>header1</td>
       <td><img alt="minimize" onclick="function to minimise container1"/>
        <img alt="maximize" onclick="function to maximize container1" /></td>
      </tr>
     <table>
     <div class="container>**Container1**</div>
     <table class="Header">
      <tr>
       <td>**header2**</td>
       <td><img alt="minimize" onclick="function to minimise container2"/>
       <img alt="maximize" onclick="function to maximize container2" /></td>
      </tr>
     <table>
     <div class="container>**Container2**</div>
     <table class="Header">
      <tr>
       <td>**header3**</td>
       <td><img alt="minimize" onclick="function to minimise container3"/>
       <img alt="maximize" onclick="function to maximize container3" /></td>
      </tr>
     <table>
     <div class="container>**Container3**</div>
    </body>
   </html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    How about this:

    $(function() {
    $(".Header:not(#Container1)").click(function(){
        var c = $(this).next(".container");
        c.slideToggle("fast");
    });
    $(".Header:not(#Container1)").toggle(
        function(){ $(this).next(".container").next("img").css('display', 'block'); },
        function(){ $(this).next(".container").next("img").css('display', 'none'); }
    );
});
    • 0