アコーディオンメニューで文字数が多いときに、レイアウトが崩れてしまいます。

タイトルの部分の文字数が少ない時はレイアウト崩れが起きないのですが、
文字数が多いとレイアウトが崩れてしまいます。
どうしたら理想のレイアウトになりますか？
テキストの行が多い時は、緑部分の高さをそれに応じて変化させたいのですが、min-heightを使ってもうまく行きませんでした。
お手数ですがよろしくお願いします。

文字数が少ない時

文字数が多い時

理想のレイアウト

<section class="question-content">
  <div class="question-content-wrap">
    <div class="question-content-wrap-ttl">
      <h1>よくある質問(FAQ)</h1>
    </div>
    <div class="question-content-wrap-list">
      <div class="question-content-wrap-list-container">
        <div class="accordion">
          <dl>
            <dt>
              <h2 aria-expanded="false" aria-controls="accordion3" class="accordion-title accordionTitle js-accordionTrigger">
                タイトルタイトルタイトルタイトルタイトルタイトルタイトル</h2>
            </dt>
            <dd class="accordion-content accordionItem is-collapsed" id="accordion3" aria-hidden="true">
              <p></p>
            </dd>
          </dl>
        </div>
      </div>
    </div>
  </div>
</section>

.question-content {
  height: auto;
  min-height: 600px;
  background-color: white;
  border:1vw solid  #38cc70;
  padding-top: 30px;
  &-wrap {
    max-width: 1080px;
    margin: 0 auto;
    &-ttl {
      text-align: center;
      h1 {
        font-weight: bold;
        font-size: 42px;
        margin-bottom: 0px;
      }
    }
    &-list {
      
    }
  }
}


.accordion dd,
.accordion__panel {
  background-color:#eee;
  line-height:1.5em;
}
.accordion h2 {
  font-size: 23px;
  font-weight: bold;
  margin-bottom: -7px;
}
.accordion p {
  padding: 20px;
  margin-bottom: 0px;
  padding-left: 80px;
  font-weight: bold;
}
.accordion p:before {
  content: "A";
  font-size: 48px;
  font-weight: bold;
  padding-right: 20px;
  line-height:0.5em;
  float: left; 
  margin-bottom: 0px;
  //追記
  width:60px;
  display:inline-block;
  margin-left:-60px;
}
dt,dd {
  margin-left:0px
}


.accordion {
    position:relative;
    background-color:#eee;
}
.question-content-wrap-list-container {
  max-width:960px;
  margin:0 auto;
  padding:2em 0 2em 0;
}
.accordionTitle,
.accordion__Heading {
  background-color:#38cc70; 
  text-align:left;
  font-weight:700; 
  padding:20px;
  display:block;
  text-decoration:none;
  color:#fff;
  transition:background-color 0.5s ease-in-out;
  &:before {
    content: "+";
    font-size:2.5em;
    line-height:0.5em;
    float: right; 
    transition: transform 0.3s ease-in-out;
  }
  &:hover {
    background-color:darken(#38cc70, 10%);
  }
  &:after {
    content: "Q";
    font-size: 48px;
    padding-right: 20px;
    line-height:0.5em;
    float: left; 
    transition: transform 0.3s ease-in-out;
  }
}
.accordionTitleActive, 
.accordionTitle.is-expanded {
    background-color:darken(#38cc70, 10%);
    &:before {
      transform:rotate(-225deg);
    }
}
.accordionItem {
    height:auto;
    overflow:hidden; 
    //SHAME: magic number to allow the accordion to animate
    
    max-height:50em;
    transition:max-height 1s;
    @media screen and (min-width:48em) {
        max-height:15em;
        transition:max-height 0.5s
    }
}
.accordionItem.is-collapsed {
  max-height:0;
}
.no-js .accordionItem.is-collapsed {
  max-height: auto;
}
.animateIn {
  animation: accordionIn 0.45s normal ease-in-out both 1; 
}
.animateOut {
  animation: accordionOut 0.45s alternate ease-in-out both 1;
}
@keyframes accordionIn {
  0% {
    opacity: 0;
    transform:scale(0.9) rotateX(-60deg);
    transform-origin: 50% 0;
  }
  100% {
    opacity:1;
    transform:scale(1);
  }
}

@keyframes accordionOut {
  0% {
    opacity: 1;
    transform:scale(1);
  }
  100% {
  opacity:0;
  transform:scale(0.9) rotateX(-60deg);
  }
}

jQuery(function(){
  var d = document,
  accordionToggles = d.querySelectorAll('.js-accordionTrigger'),
  setAria,
  setAccordionAria,
  switchAccordion,
  touchSupported = ('ontouchstart' in window),
  pointerSupported = ('pointerdown' in window);
  skipClickDelay = function(e){
    e.preventDefault();
    e.target.click();
  }

  setAriaAttr = function(el, ariaType, newProperty){
      el.setAttribute(ariaType, newProperty);
    };
  setAccordionAria = function(el1, el2, expanded){
    switch(expanded) {
      case "true":
      setAriaAttr(el1, 'aria-expanded', 'true');
      setAriaAttr(el2, 'aria-hidden', 'false');
      break;
      case "false":
      setAriaAttr(el1, 'aria-expanded', 'false');
      setAriaAttr(el2, 'aria-hidden', 'true');
      break;
      default:
      break;
    }
  };
//function
switchAccordion = function(e) {
  console.log("triggered");
  e.preventDefault();
  var thisAnswer = e.target.parentNode.nextElementSibling;
  var thisQuestion = e.target;
  if(thisAnswer.classList.contains('is-collapsed')) {
  setAccordionAria(thisQuestion, thisAnswer, 'true');
  } else {
    setAccordionAria(thisQuestion, thisAnswer, 'false');
  }
  thisQuestion.classList.toggle('is-collapsed');
  thisQuestion.classList.toggle('is-expanded');
  thisAnswer.classList.toggle('is-collapsed');
  thisAnswer.classList.toggle('is-expanded');
  thisAnswer.classList.toggle('animateIn');
  };
  for (var i=0,len=accordionToggles.length; i<len; i++) {
    if(touchSupported) {
      accordionToggles[i].addEventListener('touchstart', skipClickDelay, false);
    }
    if(pointerSupported){
      accordionToggles[i].addEventListener('pointerdown', skipClickDelay, false);
    }
    accordionToggles[i].addEventListener('click', switchAccordion, false);
  }
})();

行動規範の内容に同意します

回答2件

前回からちょっと気になってたんですけどあまり特殊なことをしたいなら
afterをfloatするのをやめるところからでは？
Aと同じような処理にすれば良いと思います

投稿2021/01/05 11:34

編集2021/01/05 11:35

yambejp

総合スコア116724

ベストアンサー

float はやめて、Flexbox でレイアウトを決めると簡単です。

css
1.accordionTitle {
2  background-color:#38cc70; 
3  text-align:left;
4  font-weight:700; 
5  padding:20px;
6  display: flex; /* 横並び */
7  align-items: center; /* 上下中央配置 */
8  text-decoration:none;
9  color:#fff;
10  transition:background-color 0.5s ease-in-out;
11  &:after { /* 修正 */
12    content: "+";
13    font-size:2.5em;
14    line-height:0.5em;
15 /*   float: right;  */
16    margin-left: auto; /* 右寄せ */
17    transition: transform 0.3s ease-in-out;
18  }
19  &:hover {
20    background-color:darken(#38cc70, 10%);
21  }
22  &:before {  /* 修正 */
23    content: "Q";
24    font-size: 48px;
25    padding-right: 20px;
26    line-height:0.5em;
27/*    float: left;  */
28    transition: transform 0.3s ease-in-out;
29  }
30}