0

estoy intentando cambiar la clase del icono 'oi-plus' del acordeón cuando está collapse, debe de aparecer la clase 'oi-plus' y cuando esté desplegado, debe cambiar por 'oi-minus'

HTML

<div id="accordion">
        <div class="card">
          <div class="card-header" id="headingOne">
            <h5 class="mb-0">
              <button class="btn btn-link btn-block" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                Lifestyle Habits <span class="oi oi-plus ic-plus"></span>
              </button>
            </h5>
          </div>

          <div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordion">
            <div class="card-body">
              <ul class="interior">
                <li>
                  <input type="checkbox" name="habits" id="intellectual">
                  <span class="txt-checkbox">Intellectual Habits</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="sportive">
                  <span class="txt-checkbox">Sportive Habits</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="smoking">
                  <span class="txt-checkbox">Smoking</span>
                </li>
                <li>
                <input type="checkbox" name="habits" id="gambling">
                <span class="txt-checkbox">Gambling problems</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="aedentary">
                  <span class="txt-checkbox">Sedentary habits</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="adequate">
                  <span class="txt-checkbox">Adequate Sleep</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="computer">
                  <span class="txt-checkbox">Computer Addiction</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="drug">
                  <span class="txt-checkbox">Drug Addiction</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="alcoholic">
                  <span class="txt-checkbox">Alcoholic</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" id="headingTwo">
            <h5 class="mb-0">
              <button class="btn btn-link btn-block collapsed" name="list" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                Dietary Habits <span class="oi oi-plus ic-plus"></span>
              </button>
            </h5>
          </div>
          <div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordion">
            <div class="card-body">
              <ul class="interior">
                <li>
                  <input type="checkbox" name="habits" id="intellectual">
                  <span class="txt-checkbox">Intellectual Habits</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="sportive">
                  <span class="txt-checkbox">Sportive Habits</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="smoking">
                  <span class="txt-checkbox">Smoking</span>
                </li>
                <li>
                <input type="checkbox" name="habits" id="gambling">
                <span class="txt-checkbox">Gambling problems</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="aedentary">
                  <span class="txt-checkbox">Sedentary habits</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="adequate">
                  <span class="txt-checkbox">Adequate Sleep</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="computer">
                  <span class="txt-checkbox">Computer Addiction</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="drug">
                  <span class="txt-checkbox">Drug Addiction</span>
                </li>
                <li>
                  <input type="checkbox" name="habits" id="alcoholic">
                  <span class="txt-checkbox">Alcoholic</span>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>

SCSS

    & .card {
    background-color: transparent;
    background-clip: unset;
    border: 0;
    border-radius: 0;
    border-bottom: 1px solid #001a5a;
    margin-left: 20px;
    width: 260px;
  }
  & .card-header {
    padding: 0 1.25rem;
    margin-bottom: 0;
    background-color: transparent;
    border-bottom: 0;
  }
  & .btn-link {
    font-weight: normal;
    color: #fff;
    background-color: transparent;
    text-decoration: none;
    & :hover{
      color: #fff;
      text-decoration: none;
      background-color: transparent;
      border-color: transparent;
    }
    & :focus{
      text-decoration: none;
      border-color: transparent;
      box-shadow: none;
    }
  }
  & .btn-link.focus {
    text-decoration: none;
    border-color: transparent;
    box-shadow: none;
      & :hover{
        color: #fff;
        text-decoration: none;
        background-color: transparent;
        border-color: transparent;
      }
  }

  & .btn-link {
    font-weight: normal;
    color: #fff;
    background-color: transparent;
    text-align: left;
  }
  & .ic-plus{
    font-size: 12px;
    position: relative;
    float: right;
    margin-top: 5px;
  }

No sé si se podrá hacer sólo con CSS en la forma en la que lo estoy haciendo si necesito algo de programación, sería con Typescript, ya se está programando con Angular 10

4
  • Si tienes el código donde se expande y contrae el acordeón puedes modificar el ícono desde ahí el 7 ene. 2021 a las 20:10
  • El collapse del acordeon es una función de bootstrap que lo saqué de la web (getbootstrap.com/docs/4.0/components/collapse)
    – derek
    el 8 ene. 2021 a las 11:46
  • Si estás usando Bootstrap "vanilla", debes tomar en cuenta de que este está fuertemente basado en jQuery, en función de ello, creo que lo que buscas es un toggler. Por otro lado, tengo una duda, estás usando algún framework en particular?
    – KBeDev
    el 18 ene. 2021 a las 18:42
  • yo estoy con la parte de maquetacion y la persona que hace el desarrollo front no me acuerdo si trabaja con Angular 10 o Angular 11
    – derek
    el 19 ene. 2021 a las 18:53

0

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

Examina otras preguntas con la etiqueta o formula tu propia pregunta.