I have a jQuery script that allows for toggling of the parent class when #icon is clicked. Additionally, when the body is clicked, it reverts back to the original class. Now, I'm looking to achieve the same behavior when clicking on #item5 or #item4 as if it were #icon being clicked.
<div id="header_wrap">
<div id="logo"></div>
<div class="contact" id="ccontainer">
<div id="form"></div>
<div id="icon"><span id="getintouch">GET IN TOUCH</span></div>
</div>
<div id="menu_wrap">
<ul id="menu">
<li id="item1"><a href="#">Home</a></li>
<li id="item2"><a href="#">About us</a></li>
<li id="item3"><a href="#">What we do</a></li>
<li id="item4"><a href="#">Portfolio</a></li>
<li id="item5"><a href="#">Contact us</a></li>
</ul>
</div>
</div>
While attempting to create my own jQuery solution to implement this feature, I've encountered some challenges due to my limited experience with JavaScript and jQuery. Here is the code snippet:
$('#icon').on('click', function(e){
$(this).parent()
.toggleClass('contact')
.toggleClass('contactexpand');
});
$('body').on('click', function(e){
$('#ccontainer')
.removeClass('contactexpand')
.addClass('contact');
});
$('#ccontainer').on('click', function(e){
e.stopPropagation();
});