JRev3 Comments - Answer Overflow

JRev3

•Created by JRev3 on 6/29/2023 in #front-end

Style elements between two headings

Really appreciate the help! I think the javascript approach actually helped me consider some new ideas. I updated the codepen with this code. I'm able to create collapsable sections without adding new divs.

/ Get h5s
const h5Elements = document.querySelectorAll('H5');

// Counter for dynamic id
let idCounter = 0;

// add dynamic ids if element does not have one
h5Elements.forEach( element => {
  console.log( element.id)
  if ( element.id === '' ) {
    element.id = `id${idCounter}`;
    idCounter++;
  }
  
  // add click listener
  element.addEventListener('click', function( event ) {
    let sectionID = this.id
    
    const elementsInSection = document.querySelectorAll(`.selected-${sectionID}`)
    
    elementsInSection.forEach( el => { 
      if( el.classList.contains('display') ) {
        el.classList.remove('display');
      }  else {
        el.classList.add('display');                      
      }
    }) //end for elementsInSection each
    
  }) //End event listener
  
  
}) //end h5Elements for each

// get all elements in document to add selector class
const elements = document.querySelectorAll("div *");

let startSelection = false;
let id = ''; // for adding dynamic classes

// Add selected classes
elements.forEach( element => {
  if ( element.tagName === 'H5') {
    startSelection = true;
    id = element.id
  } else if ( element.tagName === 'H4' ) {
    startSelection = false;
  } else if ( startSelection ) {
    element.classList.add(`selected-${id}`);
  }
})

/ Get h5s
const h5Elements = document.querySelectorAll('H5');

// Counter for dynamic id
let idCounter = 0;

// add dynamic ids if element does not have one
h5Elements.forEach( element => {
  console.log( element.id)
  if ( element.id === '' ) {
    element.id = `id${idCounter}`;
    idCounter++;
  }
  
  // add click listener
  element.addEventListener('click', function( event ) {
    let sectionID = this.id
    
    const elementsInSection = document.querySelectorAll(`.selected-${sectionID}`)
    
    elementsInSection.forEach( el => { 
      if( el.classList.contains('display') ) {
        el.classList.remove('display');
      }  else {
        el.classList.add('display');                      
      }
    }) //end for elementsInSection each
    
  }) //End event listener
  
  
}) //end h5Elements for each

// get all elements in document to add selector class
const elements = document.querySelectorAll("div *");

let startSelection = false;
let id = ''; // for adding dynamic classes

// Add selected classes
elements.forEach( element => {
  if ( element.tagName === 'H5') {
    startSelection = true;
    id = element.id
  } else if ( element.tagName === 'H4' ) {
    startSelection = false;
  } else if ( startSelection ) {
    element.classList.add(`selected-${id}`);
  }
})

24 replies

KPCKevin Powell - Community

•Created by JRev3 on 6/29/2023 in #front-end

Style elements between two headings

Kevin, thanks for weighing in! I am fine using :has, as it would be a plus if there's browser support but not a big deal if not

24 replies

KPCKevin Powell - Community

•Created by JRev3 on 6/29/2023 in #front-end

Style elements between two headings

That's an interesting idea. I will try that. I would like to make collapsible sections in this way. (I know not ideal, but the help file is already made, so less work to be able to implement it just from CSS/JS). But I think this might work. I can use the ids of the h5 to add unique classes to each selection with this approach. Thanks! I'll update after I test it.

24 replies

KPCKevin Powell - Community

•Created by JRev3 on 6/29/2023 in #front-end

Style elements between two headings

Sorry, forgot to link my codepen. Updaed the original post again.

24 replies

KPCKevin Powell - Community

•Created by JRev3 on 6/29/2023 in #front-end

Style elements between two headings

Thank you. I've updated my original post.

24 replies

Gaming

Programming