CODEWITHSUNDEEP
jqueryhtmlsvg
Thaddé Méneur
Thaddé Méneur

Reputation: 133

Hide and show div onclick svg

<polygon id="triangle" fill="none" stroke="#EB9381" stroke-miterlimit="10" points="66.233,110.916 114.721,83 66.233,55.083  "/>
<g id="rectangle">
    <rect x="90.908" y="64.82" fill="none" stroke="#EB9381" stroke-miterlimit="10" width="5" height="38" />
    <rect x="71.908" y="64.82" fill="none" stroke="#EB9381" stroke-miterlimit="10" width="5" height="38"/>
</g>

Here is my jquery. What I am trying to do is hiding the triangle id="triangle" on click, and showing the rectangle instead. I've tried with a hover effect and it does work. But with the click option it doesn't, I don't know why.

function hoverplayer()
{
    $('#rectangle').hide();
    $('#cercle_tourne').click(
        function()
        {
            $('#triangle').hide();
        },
        function()
        {
            $('#rectangle').show();
        }
    );
}

Upvotes: 2

Views: 2555

Answers (4)

Shailendra Gupta
Shailendra Gupta

Reputation: 1128

$('.yourButton').click(function(event){ event.preventDefault();//if you're using an anchor tag if not the remove it

$('.yourButton').click(function(event){
    //event.preventDefault();//incase you're using an anchor
    $('#triangle').toggle('display');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button type="button" class="yourButton">Click Me!</button>
<p id="triangle" style="display:none">Here I Am..!</p>

$('#triangle').toggle('display');

});

Upvotes: 0

Padmanaban
Padmanaban

Reputation: 119

You can try the below! But make sure 'cercle_tourne' is a container or button. And on Click of it it will show the Control(triangle) and on the second click it would hide it.

$('#cercle_tourne').click(function(){
    if($('#triangle').css('display') == 'none'){
        $('#triangle').show();
    }else{
        $('#triangle').hide();
    }
});

Hope the above helps.

Upvotes: 1

bashleigh
bashleigh

Reputation: 9324

You want to toggle which one is viewed with a button? Yea sure

$('.yourButton').click(function(event){
    event.preventDefault();//incase you're using an anchor
    if($('#triangle').css('display')=='block'){//check if triangle is showing
        $('#triangle').hide();
        $('rectangle').show();
    }else{
        $('#triangle').show();
        $('#rectangle').hide();
    }
});

Upvotes: 1

Mehmood
Mehmood

Reputation: 931

You can try this one.

CSS:

.hide{
  display:none !important;
}

JavaScript: 

$('#cercle_tourne').click(function(){
   if($('#triangle').hasClass('hide'))
   {
      $('#triangle').removeClass('hide');
   }
   else
   {
      $('#triangle').addClass('hide');
   }

});

You can add your own conditions depends upon your scenario

Upvotes: 0

Related Questions