Simple onClick effect in jQuery

Question

I have a very simple web page. Here is my Demo.

Desktop: When I hover over the circle, it expands.

iPad: When I click the circle, it expands.

However, is it possible (on iPad) that when the circle is in the "expanded" state, if I click it again, it contracts?

How would I do this using my existing code?

Javascript:

$('.circle').on('touchstart',function(){});

Many thanks for any help with this.

flavian · Accepted Answer · 2013-05-05 20:33:00Z

2

var events = "mouseover mouseout";
if (navigator.userAgent.match(/(iPod|iPhone|iPad)/)) {
    events = "touchstart";
};

$('.circle').on(events,function(){
   if ($(this).hasClass("expanded")) {
       // contract the circle
       $(this).addClass("contracted").removeClass("expanded");
   } else {
       // expand the circle
       $(this).addClass("expanded").removeClass("contracted");
   };
});

Now add class contracted to all your circles.

edited May 5, 2013 at 20:33

answered May 5, 2013 at 19:31

flavian

28.6k11 gold badges68 silver badges107 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

michaelmcgurk Over a year ago

Here is my amended code: jsbin.com/adacot/13/edit Any ideas why it doesn't "contract" if I click it when open?

michaelmcgurk Over a year ago

Thanks for this. What would you recommend I change this to?

michaelmcgurk Over a year ago

Thanks sir. I'm fairly new to Javascript as you can possibly tell. Would you be able to put together an example using my jsbin code?

michaelmcgurk Over a year ago

Yep, I'm not a big fan of jsbin either, but jsfiddle was down for me earlier :'( I've noticed the 'hover' is now disabled on Desktop. Is there a way to fix that?

Vytautas Butkus · Accepted Answer · 2013-05-05 19:32:35Z

1

I would try using jQuery toggle: http://api.jquery.com/toggle-event/

$('.circle').toggle(function() {
  $(this).addClass("expanded").removeClass("contracted");
}, function() {
  $(this).removeClass("expanded").addClass("contracted");
});

answered May 5, 2013 at 19:32

Vytautas Butkus

5,5556 gold badges34 silver badges46 bronze badges

1 Comment

michaelmcgurk Over a year ago

Thanks for the reply, Vytautas. Can you show me using my code how I would implement this? Should I change my HTML?

Collectives™ on Stack Overflow

Simple onClick effect in jQuery

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related