javascriptjquerycsspointballoon

Modify points of interest to have all points / balloons to open first and then ability to close and open again individually

I have this points of interest example: http://codyhouse.co/gem/points-of-interest/

http://codyhouse.co/demo/points-of-interest/index.html

Is it possible every time the page loads, ALL the points/balloons open to show the type and then the user has the option to click on each point to close it and to open it again individually?

For mobile view such as phones, no need for this extra feature, users will have to click on each point to reveal balloon/text.

Would you be so kind to have a code example of this? Thank you in advance.

Solution

  • You can just do this to open all the points at once:

    $('.cd-single-point').addClass('is-open');

    However it might not be a good idea because they will overlap.