Question

45

Toggle onClick jquery

rated 0 times [ 52] [ 7] / answers: 1 / hits: 35213 / 11 Years ago, fri, august 30, 2013, 12:00:00

I am new to web-designing. I have this sample code which toggles a div when we click anywhere on the window.

<!doctype html>

   <html lang=en>

     <head>

       <meta charset=utf-8>

            <title>slide demo</title>

               <link rel=stylesheet href=http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css>

                   <style>

                     #toggle {

                     width: 100px;

                     height: 100px;

                     background: #ccc;

                     }

                   </style>

                   <script src=http://code.jquery.com/jquery-1.9.1.js></script>

                   <script src=http://code.jquery.com/ui/1.10.3/jquery-ui.js>                       </script>

       </head>

       <body>



       <p>Click anywhere to toggle the box.</p>

       <div id=toggle></div>



       <script>

          $( document ).click(function() {

          $( #toggle ).toggle( slide );

          });

       </script>



    </body>

</html>

How can I add an image and change the image for show and hide? I have an '>' icon. When I click on it, div should appear and '>' should change to '<'

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jamilab

Add To Favorites

Follow

Total Points: 687

Total Questions: 88

Total Answers: 86

Location: Antigua and Barbuda

Member since Sat, Apr 24, 2021

3 Years ago

jamilab questions

1 React Native Webview - injectJavascript not working

Fri, May 7, 21, 00:00, 3 Years ago

1 Pause other video if selected video is playing in react

Tue, Feb 23, 21, 00:00, 3 Years ago

1 Images put to storage are saved as 'octet-stream' rather than image/jpeg (firebase and ReactNative)

Fri, Jan 22, 21, 00:00, 3 Years ago

1 How can I sort drop-down menu items alphabetically?

Sun, Aug 4, 19, 00:00, 5 Years ago

1 Puppeteer Get all data attribute values

Mon, Apr 22, 19, 00:00, 5 Years ago

View All

answered 11 Years ago nadiatristinl · Accepted Answer

I think you can do as follow

<img src='source:<'  id='imageid' data-othersource='source:>' />

You can declare an image like that with the two sources and then switch the src in jQuery.

//wait for the document to be fully loaded to execute

$(document).ready(function(){

  //use event delegation

  $(document).on('click','#imageid',function(){



    var $this= $(this);

    $('#toggle').toggle('slide',function(){

      //swap src of the image on toggle is completed

      var imgsrc = $this.attr('src');

      $this.attr('src',$this.data('othersource'));

      $this.data('othersource',imgsrc)



   });

  });

});

This way if for some reasons, you have to change the images, you don't need to get back to script, you just need to change the html.

http://jsfiddle.net/AmqcY/

Note: event delegation is not necessary in this case, but still i think it's important you read about that part for furthur use.