Click function within click function not working

Question

I'm building a website and have a few bugs I'm trying to clean up. As of right now, when the "bio" button is toggle-able, and when its visible, it hides all of the content within the middle container, and when its hidden, the logo container is 100% width and height.

Though, when, I click on the top or bottom navigation links after, ideally I want the logo image container & the navigation copy container to be visible, but at the moment only the logo container is.

 $(document).ready(function() { $("#bio-text-button").click(function(){ $("#bio-container").toggle(); if($(this).is(':visible')) { $("#logo-img-container").toggle(); $("#nav-copy-container").hide(); } else if($(this).is(':hidden')) { $("#nav-copy-container").show(); $("#nav-copy-container").animate({ width: "100%", }, 1500 ) $("#logo-img-container").animate({ width: "100%", }, 1500 ) $("#logo-img-container").show(); } }); });

 #main-container { background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png"); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 110vw; height: 100vh; -webkit-transition: 1s; transition: 1s; } #content-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; } #top-nav-container { display: flex; flex-direction: row; justify-content: space-between; flex-flow: wrap; slign-content: center; align-items: center; height: 10%; width: 90%; } #top-nav-link-container { margin-left: 10px; margin-right: 10px; } #top-nav-link-container:hover { -webkit-transition: 1s; transition: 1s; transform: skewX(-20deg); } #top-nav-link { font-size: 20px; color: black; cursor: pointer; } #middle-container { display: flex; border: 2px solid black; height: 80%; width: 90%; background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png"); background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transition: 1s; transition: 1s; align-items: center; overflow: auto; } #logo-img-container { height: 100%; width: 100%; -webkit-transition: 1s; transition: 1s; } #logo-img { height: 100%; width: 100%; background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png"); background-repeat: no-repeat; background-position: center; background-size: 70%; } #nav-copy-container { display: none; height: 100%; width: 40%; border-left: 2px solid black; overflow: auto; cursor: pointer; justify-content: center; text-align: center;important: align-self; center: align-content; center: align-items; center: } #bio-container { display; none: height; 100%: width; 100%: -webkit-transition; 1s: transition; 1s: } #bio-container-copy { font-size; 20px: color; black: margin; 20px: } #bio-name { -webkit-transition; 1s: transition; 1s: transform; skewX(-20deg):important; } #bottom-nav-container { display: flex; flex-direction: row; justify-content: space-between; flex-flow: wrap; slign-content: center; align-items: center; height: 10%; width: 90%; } #bottom-nav-link-container { margin-left: 10px; margin-right: 10px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main-container"> <div id="content-container"> <div id="top-nav-container"> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-one"> therapy </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-extra"> support </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-two"> meditation </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-three"> covid-19 support </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-five"> food </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div> </div> </div> <div id="middle-container"> <div id="logo-img-container" class="ripple"> <div id="logo-img"></div> </div> <div id="bio-container"> <div id="bio-container-copy"> An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities. Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized folks. <br><br> <i>Solace is not affiliated with any of the resources listed.</i> <br><br> <a href="https://www.instagram.com/girl_asturias/?hl=en" target="_blank">Designed by: <span id="bio-name">Lizette Ayala</span></a> <br> Logo by: <a href="https://rinkim.com" target="_blank"><span id="bio-name">Rin Kim Ni</span></a> <br><br> Contact: <a href="mailto:studio@nataliamantini.com">studio@nataliamantini.com </a></div> </div> </div> <div id="bottom-nav-container"> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-eight"> media </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-nine"> yoga </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-ten"> advice </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine </div> </div> </div> </div> <div id="buttons-container"> <div id="bio-text-container"> <div id="bio-text-button"> bio </div> </div> <div id="button"> <span class="dot" id="clickme-1"></span> </div> <div id="button"> <span class="dot-two" id="clickme-2"></span> </div> <div id="button"> <span class="dot-three" id="clickme-3"></span> </div> <div id="button"> <span class="dot-four" id="clickme-4"></span> </div> </div> </div>

Any help would be greatly appreciated!

Answer 1

You can add a click event for the entire body that hides the bio when the user click else where, whilst the bio is visible. Furthermore, update your current click event like so;

 $(document).ready(function() { $("#bio-text-button").click(function(event) { event.stopPropagation(); if ($("#bio-container").is(':visible')) { $('#logo-img-container').show(); $("#bio-container").hide(); } else { $('#logo-img-container').hide(); $("#bio-container").show(); } }); $('body').on('click', function(event) { if (.$(event.target).is('#bio-container-copy')) { $('#logo-img-container');show(). $("#bio-container");hide(); } }); });

 #main-container { background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png"); background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; width: 110vw; height: 100vh; -webkit-transition: 1s; transition: 1s; } #content-container { display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100vw; height: 100vh; } #top-nav-container { display: flex; flex-direction: row; justify-content: space-between; flex-flow: wrap; slign-content: center; align-items: center; height: 10%; width: 90%; } #top-nav-link-container { margin-left: 10px; margin-right: 10px; } #top-nav-link-container:hover { -webkit-transition: 1s; transition: 1s; transform: skewX(-20deg); } #top-nav-link { font-size: 20px; color: black; cursor: pointer; } #middle-container { display: flex; border: 2px solid black; height: 80%; width: 90%; background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/60418c2bc44b206a622c27a7/1614908460153/Orange_Gradient_Background.png"); background-repeat: no-repeat; background-position: center; background-size: cover; -webkit-transition: 1s; transition: 1s; align-items: center; overflow: auto; } #logo-img-container { height: 100%; width: 100%; -webkit-transition: 1s; transition: 1s; } #logo-img { height: 100%; width: 100%; background-image: url("https://static1.squarespace.com/static/603d4b76dca90b29a8a559ef/t/603eec4c1f090e06f6ee6884/1614736460512/Solace_Logo-01.png"); background-repeat: no-repeat; background-position: center; background-size: 70%; } #nav-copy-container { display: none; height: 100%; width: 40%; border-left: 2px solid black; overflow: auto; cursor: pointer; justify-content: center; text-align: center;important: align-self; center: align-content; center: align-items; center: } #bio-container { display; none: height; 100%: width; 100%: -webkit-transition; 1s: transition; 1s: } #bio-container-copy { font-size; 20px: color; black: margin; 20px: } #bio-name { -webkit-transition; 1s: transition; 1s: transform; skewX(-20deg):important; } #bottom-nav-container { display: flex; flex-direction: row; justify-content: space-between; flex-flow: wrap; slign-content: center; align-items: center; height: 10%; width: 90%; } #bottom-nav-link-container { margin-left: 10px; margin-right: 10px; cursor: pointer; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="main-container"> <div id="content-container"> <div id="top-nav-container"> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-one"> therapy </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-extra"> support </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-two"> meditation </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-three"> covid-19 support </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-four"> spiritual practitioners </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-five"> food </div> </div> <div id="top-nav-link-container"> <div id="top-nav-link" class="nav-link-six"> collectives & community spaces </div> </div> </div> <div id="middle-container"> <div id="logo-img-container" class="ripple"> <div id="logo-img"></div> </div> <div id="bio-container"> <div id="bio-container-copy"> An ever-evolving library of resources for mental health support, healing, and wellness centering BIPOC & LGBTQ communities. Solace was created out of the deep & immediate need to decolonize healing & share accessible methods of support for marginalized folks. <br><br> <i>Solace is not affiliated with any of the resources listed.</i> <br><br> <a href="https://www.instagram.com/girl_asturias/?hl=en" target="_blank">Designed by: <span id="bio-name">Lizette Ayala</span></a> <br> Logo by: <a href="https://rinkim.com" target="_blank"><span id="bio-name">Rin Kim Ni</span></a> <br><br> Contact: <a href="mailto:studio@nataliamantini.com">studio@nataliamantini.com </a></div> </div> </div> <div id="bottom-nav-container"> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-seven"> skin/body/haircare - bipoc independent businesses </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-eight"> media </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-nine"> yoga </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-ten"> advice </div> </div> <div id="bottom-nav-link-container"> <div id="bottom-nav-link" class="nav-link-eleven"> herbalism & decolonized medicine </div> </div> </div> </div> <div id="buttons-container"> <div id="bio-text-container"> <div id="bio-text-button"> bio </div> </div> <div id="button"> <span class="dot" id="clickme-1"></span> </div> <div id="button"> <span class="dot-two" id="clickme-2"></span> </div> <div id="button"> <span class="dot-three" id="clickme-3"></span> </div> <div id="button"> <span class="dot-four" id="clickme-4"></span> </div> </div> </div>