Toggle Hide Show Multiple sections

Mirza_Ali · February 11, 2022, 7:20pm

I have following html button code

<!DOCTYPE html>
<html>

<button onclick="toggleHide()">Hide/Show Sections</button>


<style>
    
.d-none {
  display: none;
}

</style>

<div id="Ayat-1" class= "hide-section"></div>
<div id="Ayat-3" class= "hide-section"></div>
<div id="Ayat-4" class= "hide-section"></div>
<div id="Ayat-5" class= "hide-section"></div>
<div id="Ayat-6" class= "hide-section"></div>
<div id="Ayat-7" class= "hide-section"></div>


<script>
    
    function toggleHide() {
  var section = document.querySelectorAll('.hide-section');
  
  section.forEach(el => el.classList.toggle('d-none'));
}

</script>
</body>
</html>
````Preformatted text`

** Issue - 1 :** I have seven sections on the page from which i want to hide six sections and show only one that i have button in it and this i am trying to do with single toggle Hide/Show button.

Section’s ID to Hide on first click: (Ayat-1,Ayat-3,Ayat-4,Ayat-5,Ayat-6.Ayat-7) than show all on second click.

The button is in Section=“Ayat-2”

This is additional version of w3 school code for single toggle hide/show, i have modified to include my requirement for multi hide/show.

** Issue - 2 :** This code is not showing the correct result when going live on the web, it suppose to hide the sections but in live web it is not hidding the sections rather its going to top of the page.

Please let me know the errors to fix in my code, your kind help will take me to my target.

DaveMaxwell · February 11, 2022, 8:36pm

Check your mark-up to ensure it matches what you’re querying for, and that .hide-section isn’t used more than what you’re expecting.

That code you provided does exactly what you say - it adds/removes the d-none class on each button click.

Mirza_Ali · February 11, 2022, 9:44pm

Thanks for reply, I am querying to hide the all sections except (Ayat-2) at first click and show all on second click which is not happining but didn’t get your point what you want to tell, what is the error in code ? do i have to use section tag in place of div? but its also not working that way.

rpg_digital · February 11, 2022, 10:34pm

Not sure if this is what you are after. I opted for a slightly different approach and section tags as that made more sense to me,

html

<section id="Ayat-1">Ayat 1</section>
<section id="Ayat-2">Ayat 2</section>
<section id="Ayat-3">Ayat 3</section>

<button onclick='hideSections()'>Hide Sections</button>

javascript

function hideSections() {
  const otherSections = document.querySelectorAll('[id^=Ayat-]:not(#Ayat-2)')
  
  otherSections.forEach((section) => section.classList.toggle('hide'))
}

I’m using the querySelectorAll to select all id’s starting with ^= ‘Arat-’ e.g. [id^=Ayat-] that are not ‘Ayat-2’ e.g. :not(#Ayat-2)

Then looping through those and toggling the ‘hide’ class.

codepen here

Mirza_Ali · February 11, 2022, 10:54pm

Aah, you nailed it you replied like an rpg thanks man, really appriciate.

Mirza_Ali · February 12, 2022, 1:09pm

Ok, now i am going one step further and create buttons for each section from Ayat-1 to Ayat-7, so i dont need wild card [^id] instead i want exactly what to hide lets say,

for Ayat-2 section button i want to show only this section all others should be hidden and same for all seven sections.

But when i create second button for Ayat-3 section its behaving same like first button and hide Ayat-3 section and not Ayat-2 even i change the property of selector to (‘Ayat-3’) i want all buttons should behave individually and show there own section.

Here is sample of codes for two buttons (Ayat- 2 Section & Ayat-3 Section)

<!DOCTYPE html>
<html>

<button id="Mybutton" onclick='hideSections()'>[1:2]</button>



<style>
#Mybutton  {
    background-color: green;
    color: white;
    width: 50px;
    text-align: center;
    border-radius: 8px;
    height: 35px;
    border-style: solid;
    border-color: blue;
    border-width: 1px;
    
}

#Mybutton:hover {
    background-color: grey;
    
}

    
.hide {
  display: none;
}

.hideWithOpacity {
  visibility: hidden;
  opacity: 0;
}

.section {
  margin: 10px;
  padding: 10px;
  border: 1px dashed red;
  max-width: 150px;
  transition: all .3s linear;
}

</style>


<section id="Ayat-1"></section>
<section id="Ayat-2"></section>

<section id="Ayat-3"></section>
<section id="Ayat-4"></section>
<section id="Ayat-5"></section>
<section id="Ayat-6"></section>
<section id="Ayat-7"></section>


<script>
    
    function hideSections() {
  const otherSections = document.querySelectorAll('[id^=Ayat-]:not(#Ayat-2)')
  
  otherSections.forEach((section) => section.classList.toggle('hide'))
}

</script>

</html>

For section (Ayat-3 Button) i have change the reference only all other things are same.

<!DOCTYPE html>
<html>

<button id="Mybutton" onclick='hideSections()'>[1:3]</button>
<script>
    
    function hideSections() {
  const otherSections = document.querySelectorAll('[id^=Ayat-]:not(#Ayat-3)')
  
  otherSections.forEach((section) => section.classList.toggle('hide'))
}

</script>

</html>

rpg_digital · February 12, 2022, 4:20pm

Ok, my brains are not firing on all cylinders today. If I even have the brief right, I am sure the solution could be done in a slicker manner.

I’ve used datasets to aid in targeting the right section. data-lastShown, will store the data-section for the last clicked button.

html

<section id="Ayat-1">Ayat 1</section>
<section id="Ayat-2">Ayat 2</section>
<section id="Ayat-3">Ayat 3</section>
<section id="Ayat-4">Ayat 4</section>

<div class='buttons' data-lastShown=''>
  <button data-section='Ayat-1'>Hide Other than Ayat-1</button>
  <button data-section='Ayat-2'>Hide Other than Ayat-2</button>
  <button data-section='Ayat-3'>Hide Other than Ayat-3</button>
  <button data-section='Ayat-4'>Hide Other than Ayat-4</button>
</div>

javascript

function resetSections (sections) {
    sections.forEach((section) => section.classList.remove('hideWithOpacity'))
}

function hideOthers({target}) {
    const showOnly = target.dataset.section
    const parentDataset = target.parentElement.dataset
    const allSections = document.querySelectorAll('section')

    // if a different button is clicked to last time then reset all first
    if (parentDataset.lastShown !== showOnly) resetSections(allSections)

    allSections.forEach((section) => {
        if (section.id !== showOnly) section.classList.toggle('hideWithOpacity')
    })
  
    // store last button clicked in data-lastShown
    parentDataset.lastShown = showOnly
}

const buttons = document.querySelectorAll('.buttons button')
buttons.forEach((button) => button.addEventListener('click', hideOthers))

Note you can swap ‘hideWithOpacity’ to just ‘hide’. Just trying things out.

codepen same as above

rpg_digital · February 12, 2022, 7:20pm

Ok, so a bit confused. Is that what you are after? [3:2] is the important line and needs to be shown each time?

I’m not really adding much to what you already have.

<div class="sections">
  <section id='Ayat-01' class='Ayat'>... Ayat-01 <button>[3:1]</button></section>
  <section id='Ayat-02' class='Ayat'>... Ayat-02 <button>[3:2]</button></section>
  <section id='Ayat-03' class='Ayat'>... Ayat-03 <button>[3:3]</button></section>
  <section id='Ayat-04' class='Ayat'>... Ayat-04 <button>[3:4]</button></section>
  <section id='Ayat-05' class='Ayat'>... Ayat-05 <button>[3:5]</button></section>
</div>

javascript

const hideOthers = function(event) {
    const sections = document.querySelectorAll('section.Ayat')
    
    sections
      .forEach(
          (section) => {
              if (section.id !== 'Ayat-02') {
                  section.classList.toggle('hide')
                  return
              }
              section.classList.toggle('border-bottom')
          }
      )
}

document
    .querySelectorAll('.Ayat button')
    .forEach(
        (button) => button.addEventListener('click', hideOthers)
    )

Mirza_Ali · February 13, 2022, 1:45pm

Many thanks for your kind help my dear, but I am sorry that the issue is not resolved. I have mentioned clearly that my concern is neither comment, nor button’s name or section’s border design etc.

The issue is in script functionality, even if you look at your last code and try to press the [3:1] or any other button its showing only the section [3:2] which is wrong and even I change the if section id to Ayat-1 or any Ayat it still show only a section [3:2] why this is my issue?

I have asked to show only the section which contend the button not the one above or not the one below in the section, script function should show only the section which content the button (one at a time) and hide all other sections on the second click, it is very clear and simple.

Secondly, I have not asked to create sections or design i have already provided the section ID from Ayat-1 to 10 or whatever number, each section will have one button and that button hide all other sections and display one himself and that is same all section buttons has to do very clear to explain.

while going to web link you might have noticed that sections are marked with green color line (top & bottom and between these areas is section) for your review to identify the issue i have putted two buttons with different names on different sections, but if you click either of it only shows the same section this is not the one i want, each section button should show there section and hide all other sections this is what i want without interfering the other button’s behavior or functionality, each will behave individually, also i didn’t ask to design for section but only the functionality to hide and show as per the requirment.

rpg_digital · February 13, 2022, 2:26pm

A breakdown in communication, and me being a bit dense @Mirza_Ali

Isn’t that essentially what I did in post #7? I have worked off post #7 for the following, this time with buttons inside the sections.

html

<div class="sections" data-lastShown=''>
  <section id='Ayat-01' class='Ayat'>
    Content for Ayat-01 <button data-show-only='Ayat-01'>[3:1]</button>
  </section>
  <section id='Ayat-02' class='Ayat'>
    Content for Ayat-02 <button data-show-only='Ayat-02'>[3:2]</button>
  </section>
  <section id='Ayat-03' class='Ayat'>
    Content for Ayat-03 <button data-show-only='Ayat-03'>[3:3]</button>
  </section>
  <section id='Ayat-04' class='Ayat'>
    Content for Ayat-04 <button data-show-only='Ayat-04'>[3:4]</button>
  </section>
  <section id='Ayat-05' class='Ayat'>
    Content for Ayat-05 <button data-show-only='Ayat-05'>[3:5]</button>
  </section>
</div>

javascript

function resetSections (sections) {
    sections.forEach((section) => section.classList.remove('hide'))
}

function hideOthers({target}) {
    const { showOnly } = target.dataset
    const parentDataset = target.parentElement.dataset
    const allSections = document.querySelectorAll('section')

    // if a different button is clicked to last time then reset all first
    if (parentDataset.lastShown !== showOnly) resetSections(allSections)

    allSections.forEach((section) => {
        if (section.id !== showOnly) {
          section.classList.toggle('hide')
          return
        }
        section.classList.toggle('border-bottom')
    })
  
    // store last button clicked in data-lastShown
    parentDataset.lastShown = showOnly
}

const buttons = document.querySelectorAll('.Ayat button')
buttons.forEach((button) => button.addEventListener('click', hideOthers))

codepen

Just to be clear @Mirza_Ali this obviously isn’t the complete job I’m doing here. You may well have to alter the code to suit your project.

I hope the above is closer to what you are after, but if not then maybe someone else here can contribute.

Mirza_Ali · February 13, 2022, 4:19pm

I really appreciate your efforts, Mr rpg, and i know you are doing more than a contributor for me. Here is below my final code for my first three section’s button, I really appologies for the inconvinence caused by my questions.

[3:1] First button

<html>

<button id="Mybutton1" onclick='hideSections()'>[3:1]</button>



<style>
#Mybutton1  {
    background-color: green;
    color: white;
    width: 50px;
    text-align: center;
    border-radius: 8px;
    height: 35px;
    border-style: solid;
    border-color: blue;
    border-width: 1px;
    
}

#Mybutton1:hover {
    background-color: grey;
    
}

    
.hide {
  display: none;
}

.hideWithOpacity {
  visibility: hidden;
  opacity: 0;
}


</style>


<div id='Ayat-2' class="hideSections"></div>
<div id='Ayat-3' class="hideSections"></div>
<div id='Ayat-4' class="hideSections"></div>
<div id='Ayat-5' class="hideSections"></div>
<div id='Ayat-6' class="hideSections"></div>
<div id='Ayat-7' class="hideSections"></div>
<div id='Ayat-8' class="hideSections"></div>
<div id='Ayat-9' class="hideSections"></div>
<div id='Ayat-10' class="hideSections"></div>
<div id='Ayat-11' class="hideSections"></div>
<div id='Ayat-12' class="hideSections"></div>
<div id='Ayat-13' class="hideSections"></div>
<div id='Ayat-14' class="hideSections"></div>
<div id='Ayat-15' class="hideSections"></div>



<script>
    
    function hideSections() {
  const otherSections = document.querySelectorAll('#Ayat-2,#Ayat-3,#Ayat-4,#Ayat-5,#Ayat-6,#Ayat-7,#Ayat-8,#Ayat-9,#Ayat-10,#Ayat-11,#Ayat-12,#Ayat-13,#Ayat-14,#Ayat-15');
  
  otherSections.forEach((section) => section.classList.toggle('hide'))
}

</script>

</html>

[3:2] Second button code with change in property names and tags for script and html.

<html>

<button id="Mybutton2" onclick='hideSectionsTwo()'>[3:2]</button>



<style>
#Mybutton2  {
    background-color: green;
    color: white;
    width: 50px;
    text-align: center;
    border-radius: 8px;
    height: 35px;
    border-style: solid;
    border-color: blue;
    border-width: 1px;
    
}

#Mybutton2:hover {
    background-color: grey;
    
}

    
.hide {
  display: none;
}

.hideWithOpacity {
  visibility: hidden;
  opacity: 0;
}


</style>


<section2 id='Ayat-1' class="hideSectionsTwo"></section2>
<section2 id='Ayat-3' class="hideSectionsTwo"></section2>
<section2 id='Ayat-4' class="hideSectionsTwo"></section2>
<section2 id='Ayat-5' class="hideSectionsTwo"></section2>
<section2 id='Ayat-6' class="hideSectionsTwo"></section2>
<section2 id='Ayat-7' class="hideSectionsTwo"></section2>
<section2 id='Ayat-8' class="hideSectionsTwo"></section2>
<section2 id='Ayat-9' class="hideSectionsTwo"></section2>
<section2 id='Ayat-10' class="hideSectionsTwo"></section2>
<section2 id='Ayat-11' class="hideSectionsTwo"></section2>
<section2 id='Ayat-12' class="hideSectionsTwo"></section2>
<section2 id='Ayat-13' class="hideSectionsTwo"></section2>
<section2 id='Ayat-14' class="hideSectionsTwo"></section2>
<section2 id='Ayat-15' class="hideSectionsTwo"></section2>



<script>
    
    function hideSectionsTwo() {
  const otherSectionsTwo = document.querySelectorAll('#Ayat-1,#Ayat-3,#Ayat-4,#Ayat-5,#Ayat-6,#Ayat-7,#Ayat-8,#Ayat-9,#Ayat-10,#Ayat-11,#Ayat-12,#Ayat-13,#Ayat-14,#Ayat-15');
  
  otherSectionsTwo.forEach((section2) => section2.classList.toggle('hide'))
}

</script>

</html>

[3:3] Third button code with change in property names and tags for script and html.

<html>

<button id="Mybutton3" onclick='hideSectionsThree()'>[3:3]</button>



<style>
#Mybutton3  {
    background-color: green;
    color: white;
    width: 50px;
    text-align: center;
    border-radius: 8px;
    height: 35px;
    border-style: solid;
    border-color: blue;
    border-width: 1px;
    
}

#Mybutton3:hover {
    background-color: grey;
    
}

    
.hide {
  display: none;
}

.hideWithOpacity {
  visibility: hidden;
  opacity: 0;
}


</style>


<section3 id='Ayat-1' class="hideSectionsThree"></section3>
<section3 id='Ayat-2' class="hideSectionsThree"></section3>
<section3 id='Ayat-4' class="hideSectionsThree"></section3>
<section3 id='Ayat-5' class="hideSectionsThree"></section3>
<section3 id='Ayat-6' class="hideSectionsThree"></section3>
<section3 id='Ayat-7' class="hideSectionsThree"></section3>
<section3 id='Ayat-8' class="hideSectionsThree"></section3>
<section3 id='Ayat-9' class="hideSectionsThree"></section3>
<section3 id='Ayat-10' class="hideSectionsThree"></section3>
<section3 id='Ayat-11' class="hideSectionsThree"></section3>
<section3 id='Ayat-12' class="hideSectionsThree"></section3>
<section3 id='Ayat-13' class="hideSectionsThree"></section3>
<section3 id='Ayat-14' class="hideSectionsThree"></section3>
<section3 id='Ayat-15' class="hideSectionsThree"></section3>



<script>
    
    function hideSectionsThree() {
  const otherSectionsThree = document.querySelectorAll('#Ayat-1,#Ayat-2,#Ayat-4,#Ayat-5,#Ayat-6,#Ayat-7,#Ayat-8,#Ayat-9,#Ayat-10,#Ayat-11,#Ayat-12,#Ayat-13,#Ayat-14,#Ayat-15');
  
  otherSectionsThree.forEach((section3) => section3.classList.toggle('hide'))
}

</script>

</html>

After a long search and hours of finding the reason I came to know that conflict was with multiple html button properties which I was overlooked , when I change each button individually and start to go line by line I came to know that I am referencing the same tag names and id’s in all buttons which causes the button to behave randomly.

Anyhow the code is ready as per my requirement and once again I want to say sorry if any problem caused by me and really really appreciate your efforts GOD Bless you. The issue is now being CLOSED.
We will meet soon in another query. Hope you will assist me also there, this time it will be angular.

system · May 15, 2022, 11:32pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Jquery help ASAP pls JavaScript	11	1149	September 12, 2013
Help with JQuery toggle or Show/hide JavaScript	6	851	July 15, 2020
Trying to hide input element based on json response JavaScript	4	850	December 14, 2018
Show hide javascript JavaScript	3	1205	August 24, 2014
Change Text on click with jQuery - Please help JavaScript	40	4473	June 25, 2011

Toggle Hide Show Multiple sections

Related topics