How to change html with jquery toggle?

Question

When you click on the menu icon, a new layer is created and you want to change its menu icon.

You can open and close a new layer with toggleClass. When I open a new layer, I try to change it from the existing menu icon to another menu icon.

html

<div class="mobile-nav-container">
    <nav class="mobile-nav">
        <ul>
            <li class="with-submenu">
                <button class="btn_popular">
                    <svg class="home-mark" height="100" width="100">
                      <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
                    </svg> 
                </button>
            </li>
            <li class="with-submenu">
                <button class="btn_trends">
                    <svg class="trends-mark" height="140" width="500">
                      <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
                    </svg>
                </button>
            </li>
        </ul>
    </nav>
</div>

<div class="trends-layer">
    <span>new layer</span>
</div>

css

.mobile-nav {
    position: fixed;
    bottom: 0;
    width: 100%;
    background: #fff;
    z-index: 50;
    border-top: 1px solid #eee;
    height: 47px;
    left: 0;
    right: 0;
    top: auto;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.mobile-nav>ul {
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    height: 100%;
}

.mobile-nav>ul, .mobile-nav>ul>li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
}

.mobile-nav>ul>li {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
    width: 50%;
}

.trends-layer {
    position: fixed;
    z-index: 50;
    top: 0;
    left: 0;
    width: 100%;
    background: hsla(0,0%,100%,.98);
    color: #1a1a1a;
    font-size: 1.8rem;
    height: 0;
    opacity: 0;
    overflow: hidden;
    visibility: hidden;
    -webkit-transition: opacity .15s,height 0s .15s;
    transition: opacity .15s,height 0s .15s;
}

.trends--active {
    height: 100%;
    opacity: 1;
    visibility: visible;
    -webkit-transition: opacity .15s,height 0s;
    transition: opacity .15s,height 0s;
    padding-bottom: 8rem;
}

javascript

$(function() {

    $('.btn_trends').on('click', function (e) {
      e.preventDefault();
      var trendsCloseBtn = $('.trends--active');

        $(this).toggleClass('trends--active');
        $('.trends-layer').toggleClass('trends--active');

        if (trendsCloseBtn.children('.trends-close')) {
               $('.trends-close').remove;
               $('.btn_trends').html('<svg class="trends-mark" height="140" width="500"><ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" /></svg>');
            } else {
               $('.trends-close').remove;
           $('.btn_trends').html('<svg class="trends-close" height="210" width="400"><path d="M150 0 L75 200 L225 200 Z" /></svg>');
            }

    });

});

When you click the btn_trends class

A new layer appears

Existing SVG (.trends-mark) disappears and new SVG (.trends-mark) appears.

ToggleClass works fine in the above javascript code, but it is not good to change SVG.

Thank you for your attention to this matter.

demo snippet

https://codepen.io/l2zeo/pen/mgOKzB

can you make a demo snippet from these code?not sure what you mean not good to change SVG. — kasperite
– kasperite, Commented Apr 9, 2019 at 0:54
svg work as expected without problem but you should add () on remove because its function. .remove() — daremachine
– daremachine, Commented Apr 9, 2019 at 1:13

kasperite · Accepted Answer · 2019-04-09 02:22:29Z

1

see updated codepen

Instead of:

if (trendsCloseBtn.children('.trends-close')) {
....
}

I changed it to:

if ($(this).hasClass("trends--active")) {
...
}

Is the expected result what you need?

answered Apr 9, 2019 at 2:22

kasperite

2,4781 gold badge16 silver badges17 bronze badges

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

1 Comment

soria Over a year ago

Yes, that's right. !! I'll change the order :) Thank you for your help. Thank you for all your assistance.

Collectives™ on Stack Overflow

How to change html with jquery toggle?

html

css

javascript

When you click the btn_trends class

demo snippet

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

html

css

javascript

When you click the btn_trends class

demo snippet

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related