CSS :not(:first-of-type) isn't working on div but works on other elements-CodePudding

I am creating an accordion in which the first element is open. Crediting the code here.

The main modification to this code is that I wanted to put some subtext under the main title, so I created a div and wrapped the h2 and h3 inside of it. You can see my HTML, CSS, and JS below:

$(function() {
  $(".accordion-content:not(:first-of-type)").css("display", "none");
  $(".js-accordion-title:first-of-type").addClass("open");

  $(".js-accordion-title").click(function() {
    $(".open").not(this).removeClass("open").next().slideUp(300);
    $(this).toggleClass("open").next().slideToggle(300);
  });
});

.accordion-title {
  border-top: 1px solid #BEBEBE;
  padding: 2em 0;
  background: #F7F7F7;
}

.accordion-container .accordion-title h2  {
  position: relative;
  margin: 0;
  background-color: #F7F7F7;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: #DA15B6;
  text-align: center;
  cursor: pointer;
  margin-bottom: .125em;
}

.accordion-container .accordion-title h3 {
  background-color: #F7F7F7;
  font-size: 18px;
  letter-spacing: 0.9px;
  line-height: 1.5em;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  text-align: center;
}

.price-number {
  font-size: 25px;
  letter-spacing: 0.54px;
  font-weight: 700;
}

.accordion-container .accordion-title h2::after {
  content: '3';
  position: absolute;
  right: 25px;
  bottom: -10px;
  font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
  content: '2';
  position: absolute;
  right: 25px;
  bottom: -10px;
  font-size: 1.3em;
}

/*CSS for CodePen*/

.accordion-content {
  padding-left: 2.3125em;
}
.accordion-container {
  width: 100%;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" >
  <div >
    <h2 >Standard</h2>
    <h3 >Starting at
      <span >$1,650</span></h3>
  </div>
  <div >
    <p>Accordion Content1</p>
  </div>
  <div >
    <h2>Pro</h2>
    <h3 >Starting at
      <span >$2,950</span></h3>
  </div>
  <div >
    Accordion Content2
  </div>
  <div >
    <h2>Elite</h2>
    <h3 >Starting at
      <span >$3,950</span></h3>
  </div>
  <div >
    Accordion Content3
  </div>
</div>

The issue I am having is trying to have the first accordion-content opened on page load. This should be achievable with the first line of JS, "$(".accordion-content:not(:first-of-type)").css("display", "none");" but it doesn't seem to work. I believe it has to do with a conflict between the div "accordion-title" and div "accordion-content". If I change "accordion-content" to have a p or h5 tag for example, the code will work properly. Are there any suggestions on how I could work around this?

Thanks in advance.

CodePudding user response：

First of type targets the first div(in your case) in the parent, not based on the class you provided so it would not work as you would expect

You can use this instead

$( ".accordion-content:not( :first )" ).css( "display", "none" );

or you could just set them all to display none in css and either open the first one with js or with a class in css and add that class in js or markup

$(function() {
  $(".accordion-content:not(:first)").css("display", "none");
  $(".js-accordion-title:first-of-type").addClass("open");

  $(".js-accordion-title").click(function() {
    $(".open").not(this).removeClass("open").next().slideUp(300);
    $(this).toggleClass("open").next().slideToggle(300);
  });
});

.accordion-title {
  border-top: 1px solid #BEBEBE;
  padding: 2em 0;
  background: #F7F7F7;
}

.accordion-container .accordion-title h2  {
  position: relative;
  margin: 0;
  background-color: #F7F7F7;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: #DA15B6;
  text-align: center;
  cursor: pointer;
  margin-bottom: .125em;
}

.accordion-container .accordion-title h3 {
  background-color: #F7F7F7;
  font-size: 18px;
  letter-spacing: 0.9px;
  line-height: 1.5em;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  text-align: center;
}

.price-number {
  font-size: 25px;
  letter-spacing: 0.54px;
  font-weight: 700;
}

.accordion-container .accordion-title h2::after {
  content: '3';
  position: absolute;
  right: 25px;
  bottom: -10px;
  font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
  content: '2';
  position: absolute;
  right: 25px;
  bottom: -10px;
  font-size: 1.3em;
}

/*CSS for CodePen*/

.accordion-content {
  padding-left: 2.3125em;
}
.accordion-container {
  width: 100%;
  margin: 0 auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="accordion" >
  <div >
    <h2 >Standard</h2>
    <h3 >Starting at
      <span >$1,650</span></h3>
  </div>
  <div >
    <p>Accordion Content1</p>
  </div>
  <div >
    <h2>Pro</h2>
    <h3 >Starting at
      <span >$2,950</span></h3>
  </div>
  <div >
    Accordion Content2
  </div>
  <div >
    <h2>Elite</h2>
    <h3 >Starting at
      <span >$3,950</span></h3>
  </div>
  <div >
    Accordion Content3
  </div>
</div>

CodePudding user response：

.hide() all .accordion-content, then add .open to the .first() .js-accordion-title and .show() the .first() .accordion-content

$(function() {
  $('.accordion-content').hide();
  $(".js-accordion-title").first().addClass('open').next().show();
  $(".js-accordion-title").click(function() {
    $(this).toggleClass("open").next().slideToggle(300);
  });
});

.accordion-container div.accordion-content:first-of-type {
  background: red;
}

.accordion-title {
  border-top: 1px solid #BEBEBE;
  padding: 2em 0;
  background: #F7F7F7;
}

.accordion-container .accordion-title h2  {
  position: relative;
  margin: 0;
  background-color: #F7F7F7;
  font-size: 32px;
  font-weight: 700;
  text-transform: uppercase;
  color: #DA15B6;
  text-align: center;
  cursor: pointer;
  margin-bottom: .125em;
}

.accordion-container .accordion-title h3 {
  background-color: #F7F7F7;
  font-size: 18px;
  letter-spacing: 0.9px;
  line-height: 1.5em;
  font-weight: 600;
  text-transform: uppercase;
  color: #000;
  text-align: center;
}

.price-number {
  font-size: 25px;
  letter-spacing: 0.54px;
  font-weight: 700;
}

.accordion-container .accordion-title h2::after {
  content: '3';
  position: absolute;
  right: 25px;
  bottom: -10px;
  font-size: 1.3em;
}
.accordion-container .accordion-title.open h2::after {
  content: '2';
  position: absolute;
  right: 25px;
  bottom: -10px;
  font-size: 1.3em;
}

/*CSS for CodePen*/

.accordion-content {
  padding-left: 2.3125em;
}
.accordion-container {
  width: 100%;
  margin: 0 auto;
}

<div id="accordion" >
  <div >
    <h2 >Standard</h2>
    <h3 >Starting at
      <span >$1,650</span></h3>
  </div>
  <div >
    <p>Accordion Content1</p>
  </div>
  <div >
    <h2>Pro</h2>
    <h3 >Starting at
      <span >$2,950</span></h3>
  </div>
  <div >
    Accordion Content2
  </div>
  <div >
    <h2>Elite</h2>
    <h3 >Starting at
      <span >$3,950</span></h3>
  </div>
  <div >
    Accordion Content3
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>