Onclick The UL heading change?

Question

<li class="main_li">
    <a id="post_youowe" onclick="addremoveclass('youowe')" class="main_menu changetxt2" href='javascript:void(0)'>
        <span class="showme">Your Owe</span>
        <span class="hideme">Outstanding</span>
    </a>
    <ul class="sub_ul">
        <li id="post_housingloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('housingloan')">Home Loans 55</a> </li>
        <li id="post_carloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('carloan')">Car Loans</a></li>
        <li id="post_personalloan"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('personalloan')">Personal Loans</a> </li>
        <li id="post_creditcards"><a class="sub_inner close_menu" href='javascript:void(0)' onclick="addremoveclass('creditcards')">Credit Cards</a> </li>
    </ul>
</li>

Script I used:

function addremoveclass(id) {
    $("li").removeClass('active');
    $("#post_" + id + "").addClass('active');
    $('.result_col').hide();
    $('#tab' + id + '').fadeIn();
    $('.hideme').hide();
    $('.showme').show();
    var check = $("#post_" + id + "").parent().find(".sub_ul:visible").length;
    if (!check) {
        $("#post_" + id + "").find('.hideme').show();
        $("#post_" + id + "").find('.showme').hide();
    }
}

Whenever I click on the inner heading the main heading change from “outstanding” to “you owe”. I want that whenever I click to inner heading, the heading shold be “outstanding” and when I minimize the heading button, then only show “you owe”.

Answer 1

You can update your html as

<ul class="result_col">
            <li class="main_li">
                <a onclick="toggle(this, true);" class="main_menu changetxt2" href='javascript:void(0)'>
                    <span class="youowe" style="display:none;">Your Owe</span>
                    <span class="outstanding">Outstanding</span>
                </a>
                <ul class="sub_ul">
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Home Loans 55</a> </li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Car Loans</a></li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Personal Loans</a> </li>
                    <li><a class="sub_inner close_menu" href='javascript:void(0)' onclick="toggle(this, false);">Credit Cards</a> </li>
                </ul>
            </li>
        </ul> 

and use below script

function toggle(element, isParent)
    {
        if (isParent)
        {
            // Set title to you owe.
            $(".youowe").show();
            $(".outstanding").hide();

            // toggle inner UL.
            $(element).next().toggle();
        }
        else
        {
            // remove active class
            $(element).parents(".sub_ul").find("li").removeClass('active');

            // add active class to current element.
            $(element).parent().addClass('active');

            // set title to outstanding.
            $(".youowe").hide();
            $(".outstanding").show();
        }
    }

This way you option will be open with title "outstanding", when you click on outstanding it will minimize the inner options and title will be "you owe". on click of "you owe" it will expand the inner options, further click on inner option will set title to "outstanding".

Since your question is incomplete, let me know if you need something else, I will update the script for you.

Working Demo : https://jsfiddle.net/z07jurfv/3/