CODEWITHSUNDEEP
jquerysvgtoggle
user2519032
user2519032

Reputation: 849

jQuery toggle with SVG

I'm using a lot show/hide or toggle method with jQuery.

Now I'm struggling with SVG map.

So far I've tried like these examples:

    $(".runs-toggle").click(function(){
      $("#Snow_mashine").toggle();
    });


    $('.runs-toggle').click(function(){
        $("#Snow_mashine").toggleClass('hidden');
    });

These two examples doesn't work.

.runs-toggle is a toggle button, so on first click, the #Snow_mashine (the object from the map) has to become hidden and after clicking again it will show #Snow_machine.

When I'm using like this:

$(".runs-toggle").click(function(){
  $("#Snow_mashine").hide();
});

It hides the element, but if I use .show() it doesn't shows the element.

I've read about instead of using .addClass(), the .attr() function is working with SVG, but I don't know how to achieve the toggle effect.

        $('.runs-toggle').click(function(){
           $("#Snow_mashine").attr("class","hidden");
        });

It's adding hidden class to the element and when that class has display:none with CSS, it works great, but how do I show the element after second click?

Upvotes: 0

Views: 2645

Answers (3)

darryn.ten
darryn.ten

Reputation: 6983

I managed to solve this issue like this

$('.the-thing').attr('class') === 'the-thing hidden' ? $('.the-thing').attr('class', 'the-thing') : $('.the-thing').attr('class', 'the-thing hidden');

Upvotes: 0

Ashish
Ashish

Reputation: 743

Try below code.

$(".runs-toggle").click(function(){
    if($("#Snow_mashine").css("display")=="block")
    {
        $("#Snow_mashine").css("display", "none");
    }
    else
    {
        $("#Snow_mashine").css("display", "block");
    }
});

Upvotes: 3

Bojan Petkovski
Bojan Petkovski

Reputation: 6933

To toggle a class you can use toggleClass

$('.runs-toggle').click(function(){
   $("#Snow_mashine").toggleClass("hidden");
});

Upvotes: -2

Related Questions