div element with different elements in it. Want to hide whole element on page load. want to hide loaded elemnt by clicking btn and show hidden elemnt

Question

here is my div code and my file type is .php

these are div elements that I want to hide.

i use different methods with id and class also with javascript but my issue is not resolved

        <div class="qamar-container">
            <div class="content-section">
                <h1>AB & MIB Traders</h1>
            </div>
            <div class="button-section">
                <button>AB</button>
                <button>ABC</button>
            </div>
        </div>
    </div>```

if need any other information please tell me.

Answer 1

here are the steps by which my issue is resolved.

CSS Styles

            display:none;
        }

javascript

    jQuery('#qamar-ab').on('click', function(event) {        
         jQuery('#ab').toggle('show');
         jQuery('#qamar').toggle('hide');
    });
});