Onclick UL header 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 changes from “prominent” to “you should”. I want that whenever I click on the inner title, the title should be “prominent”, and when I minimize the title button, then I only show “you should”.

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();
        }
    }

, "", , , " ". " " , , "".

, , - , script .

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