skip to Main Content

how to hide div class with specific title in CSS or DOM ?
here is 2 Same div class with different titles, i want to show one and hide others.
how to hide other with specific title any CSS code or DOM code.

<div class="main-market">
<div class="market-title mt-1">MATCH_ODDS</div>

<div class="main-market">
<div class="market-title mt-1">TIED_MATCH</div>

https://phpout.com/wp-content/uploads/2023/09/tmZXt.png

2

Answers


  1. If you want to achieve this using DOM manipulation with JavaScript, you can iterate over the elements and hide the ones with a specific title using the querySelectorAll() method and the style property.

    const marketTitles = document.querySelectorAll('.main-market .market-title');
    marketTitles.forEach(function(title){
        if(title.textContent !== 'MATCH_ODDS'){
            title.style.display = 'none'
        }
    });
    
    Login or Signup to reply.
  2. If you’re dynamically appending those DIVs through JavaScript, you can assign them dynamic classes, allowing you to hide or show them based on their classes.
    It’s essential to pass an ID, class, or attributes to identify these DIVs. Alternatively, if you need to display only one DIV without any selections, you can css first child element.

    .main-market .market-title {
        display: none;
    }
    
    .main-market .market-title:first-child {
        display: block;
    }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search