jQuery accordion hiding tabs in CSS

Question

I have a jQuery UI accordion with Markup structure

        <div id="accordion2">
          <h3>title</h3>
                <div>stuff texty</div>
          <h3>title2</h3>
                <div>stuff texty</div>
        </div>

However, the second tab of the accordion is in a plainer format than the first (i.e. it has less pictures and is hence more mobile friendly).

I am want to use a media query to hide the first tab and its contents when screen width is less than 640px. I tried giving the first h3 and the first div tags a class of first and then used

@media (max-width: 640px) {
        .first {
           display: none;
        }
}

To make them disappear... but it didn't work. Does anyone know how I can go about doing this?

Answer 1

try this as a CSS3 option:

#accordion2 h3:first-of-type
{
  display:none;
}

if you cannot support CSS3 then give that first heading a class name and target that.