Support » Allgemeine Fragen » input type=“ceckbox“ reagiert nicht

  • Leider komme ich mit meinem bescheidenen Wissen nicht weiter und bitte um Hilfe.
    Nutze twenty-sixteen-Child und habe in einer Beitragsseite eine Checkbox platziert, um versteckten Text einzublenden. Hier die Beitragsseite:

    <div class="fluxpress">
        <p>Artikel <strong>H A Z</strong></p>
    
        <div class="fluxarticle">
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci e....tias iure facere dolorum adipisci eum? Saepe, itaque.orem ipsum dolor sit amet, consectetur adipisicing e</p>
          <input id="fluxarticle-one" type="checkbox" name="fluxarticles">
          <label for="fluxarticle-one"> lesen</label>
          
    <div class="fluxarticle-content">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, architecto, explicabo perferendis nostrum, maxime impedit atque odit sunt pariatur illo obcaecati soluta molestias iure facere dolorum adipisci eum? Saepe, itaqueorem ipsum dolor sit amet, consectetur adipi....</p>
          </div>
        </div> <! -- End fluxarticle -->
    </div>

    Dazu gehören folgende Angaben in der style.css

    .fluxpress {
    	  float: left;
    	  width: 100%;
    	  padding: 0 1em;
    	}
    	/* Acordeon styles */
    .fluxarticle {
    	  position: relative;
    	  margin-bottom: 1px;
    	  width: 100%;
    	  overflow: hidden;
    	}
    .fluxarticle input {
    	  position: absolute;
    	  opacity: 0;
    	  z-index: 5;
    	}
    .fluxarticle label {
    	  position: relative;
    	  display: block;
    	  padding: 0 0 0 1em;
    	  border: 1px solid #263578;
    	  cursor: pointer;
    	}
    
    .fluxarticle-content {
    	  max-height: 0;
    	  overflow: hidden;
    	  border: 1px solid #263578;
    	  -webkit-transition: max-height .35s;
    	  -o-transition: max-height .35s; /* weglassen*/
    	  transition: max-height .35s;
    	}
    
    .fluxarticle-content p {
    	  margin: 1em;
    	}
    	/* :checked */
    .fluxarticle input:checked ~ .fluxarticle-content {
    	  max-height: none;
    	}
    	/* Icon */
    .fluxarticle label::after {
    	  position: absolute;
    	  right: 0;
    	  top: 0;
    	  display: block;
    	  width: 3em;
    	  height: 3em;
    	  text-align: center;
    	color: #263578;
    	  -webkit-transition: all .35s;
    	  -o-transition: all .35s;
    	  transition: all .35s;
    	}
    .fluxarticle input[name=fluxarticles] + label::before {
    	  content: "--- mehr ";
    	}
    .fluxarticle input[name=fluxarticles] + label::after {
    	  content: "\25BC";
    	}
    .fluxarticle input[name=fluxarticles]:checked + label::before {
    	  content: "--- weniger ";
    	}
    .fluxarticle input[name=fluxarticles]:checked + label::after {
    	  transform: rotateX(180deg);
    	}

    Die css-Anweisungen ab .fluxarticle input:checked werden offensichtlich nicht erkannt, so dass es nicht zu dem gewünschten Verhalten nach Klicken der Checkbox kommt.
    Werden dieselben html und css Anweisungen außerhalb WordPress in einer einfachen html-Datei umgesetzt, klappen die Anweisungen. Dehalb bin ich derzeit ratlos, waoran es liegen kann bzw. wie ich den Fehler finden kann.
    Danke für eure Hilfe!

    zum Testen siehe : http://www.flux-hildesheim.org/testtab/

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • BEvor du dich ewig damit aufhältst, installier dir doch ein Plugin wie z.B. das: de.wordpress.org/plugins/wp-showhide/

    Thread-Ersteller vlux

    (@vlux)

    Vielen Dank für den Tipp. Als Hobby-Entwickler würde ich jedoch gerne verstehen, warum es nicht klappt. In meiner native-Umgebung funktioniert die Testseite, siehe
    test_accordion_V01.html
    Nach meinem Versuch es in unsere WordPress-Installation 1:1 zu übernehmen, funktioniert es leider nicht, siehe
    http://www.flux-hildesheim.org/testtab/
    Der Seietninspektor von Firefox hat mir leider auch nicht weiter geholfen, deswegen meine Hoffnung, hier im Forum einen Lösungshinweis zu bekommen.
    Danke!!

Ansicht von 2 Antworten - 1 bis 2 (von insgesamt 2)
  • Das Thema „input type=“ceckbox“ reagiert nicht“ ist für neue Antworten geschlossen.