CODEWITHSUNDEEP
javascriptjqueryappendtoggle
Matthew
Matthew

Reputation: 2246

Is there a way to toggle the .append() jQuery method?

I want to appendToggle another img in place of plus.svg. If you guys know a way to somehow toggle the .append() method, that would be great. I want to change the CSS when you click on it, then change it again, basically.

           $(function(){
            $("#btw").click(function(){
                $("#btwl").slideToggle(300);
                $(this).append("<style>#btw::before{content: url(minus.svg);width: 16px;eight: 16px;background-size: 16px 16px;background-repeat: no-repeat;vertical-align: middle;padding-right: 10px;}</style>");
            });
        });

Upvotes: 2

Views: 14996

Answers (4)

Loken Makwana
Loken Makwana

Reputation: 3848

You can remove the css by providing id to the style

$(function(){
    $("#btw").click(function(){
        $("#btwl").slideToggle(300);
        if($('#btwl').is(':hidden')) {
            $(this).append("<style id='toggle_css'>#btw::before{content: url(minus.svg);width: 16px;eight: 16px;background-size: 16px 16px;background-repeat: no-repeat;vertical-align: middle;padding-right: 10px;}</style>");
        } else {
            $('#toggle_css').remove();
        }
    });
});

Upvotes: 2

jrthib
jrthib

Reputation: 1319

You could achieve the same effect if you use toggleClass:

$(this).toggleClass('selected');

Then in your CSS stylesheet do something like:

.selected::before {
    content: url(minus.svg);
    width: 16px;
    height: 16px;
    background-size: 16px 16px;
    background-repeat: no-repeat;
    vertical-align: middle;
    padding-right: 10px;
}

Source: http://api.jquery.com/toggleClass/

Upvotes: 3

Shawn31313
Shawn31313

Reputation: 6052

Use the toggleClass Method:

<style style="text/css">
    .before::before{
        content: url(minus.svg);
        width: 16px;
        height: 16px;
        background-size: 16px 16px;
        background-repeat: no-repeat;
        vertical-align: middle;
        padding-right: 10px;
    }
</style>
<script type="text/javascript">
    $(function(){
        $("#btw").click(function(){
            $("#btwl").slideToggle(300);
            $(this).toggleClass("before");
        });
    });
</script>

Upvotes: 1

Ajinkya
Ajinkya

Reputation: 22720

you can use toggleClass.
Put the required style under some class and do

   $("#btw").click(function(){
       $(this).toggleClass("requiredClass");
   });

Upvotes: 1

Related Questions