Accordion / Felder Anordnung, Steuerung funktioniert nicht - Seite 3

Iago2 · #21 (**permalink**) 10.02.2020, 13:18

Zitat:

Zitat von cloned

wenn das dein Ziel ist,

Mein Ziel ist es nicht ständig neue Dinge anzufangen, d.h. das CSS dann an die JS Steuerung anzupassen.
Das sind ja Tutorials, ich hab keinen konkreten Bedarf einen Codeplayer zu implementieren, gibt's ja genug im Netz.

Iago2 · #22 (**permalink**) 10.02.2020, 13:47

Was mich wundert ist, dass wenn ich im originalen CSS den vierten Listenpunkt einfärbe, dieser nicht zu sehen ist (oder die Farbe nicht zu sehen ist):

HTML-Code:

li:nth-child(4) {
			background:rgb(211,211,211);
			}

cloned · #23 (**permalink**) 10.02.2020, 14:20

Einfärben funktioniert ja, du musst nur deine float etc. styles entfernen. Aber du hast da irgendeine komische Logik drinnen (die ich auch nicht wirklich gewillt bin zu entwirren, da verweise ich lieber auf flexbox)

Entfernst du all deine float styles dann wird dir auch die Box richtig angezeigt. (Nur halt eben alle untereinander und nicht übereinander)

Iago2 · #24 (**permalink**) 10.02.2020, 21:45

Ich habs!

Merci cloned!

HTML-Code:

<!DOCTYPE html>
<html>

	<head>
	
	<title>codeplayerII</title>
	
	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
	
	<style type="text/css">
	
	body {
			
			font-family: Arial, Helvetica, sans-serif;
			margin:0px;
			padding:0px;
		
			}
			
	
		#top-bar {
			
			width: 100%;
			height: 40px;
			border: 1px solid grey;
			background-color:#D8D8D8;	
			}
      
      button.active {
			background-color: yellow;
			}
			
		#button {
			text-align:center;
			
			}
		
		button {
			
			background:rgb(208,219,224);
			}	
			
			
		/* Accordion */
		
		.accordion {
			
			width:100%;
			height:500px;		
			}
			
 
			
			
		#html {
			
			height:300px;
			background-color: #2b5fd6;
			float:left;
			
			}
		
		#css {
			height:300px;
			background-color: green;
			float:left;
			}	
	
		#js {
			height:300px;
			background-color: red;
			float:left;
			
			}
		
		#output {
			
			height:300px;
			background:rgb(211,211,211);
			float:left;
			}	

	
	</style>
				
	</head>
	
	
	<body>
	
	<div id="top-bar">		
		<div id="button">
	
		<button type="button" class="js-btn" data-for="html">HTML</button>
		<button type="button" class="js-btn" data-for="css">CSS</button>
		<button type="button" class="js-btn" data-for="js">Javascript</button>
		<button type="button" class="js-btn" data-for="output">Output</button>
	
		</div>
	</div>
		
		<div class="accordion">		
      <div id="html">  <h3>HTML</h3> </div>    
      <div id="css"> <h3>CSS</h3> </div>    
      <div id="js"> <h3>JavaScript</h3>  </div>    
      <div id="output"> <h3>Output</h3> </div>    
      
  </div>
	
	<script type="text/javascript">
	
	
	$(document).ready(function(){		
  
  function defaultView() {
    $("#html").css("width","50%");
    $("#css").css("width","0px");
    $("#js").css("width","0px");
    $("#output").css("width","50%");
  }
  
  defaultView();
  
  
  $('.js-btn').on('click', function() {
	  
  	const $this = $(this), $accordion = $('.accordion');
  	
    $this.toggleClass('active');       

    var totalActiveElements = $('.active').length;
    
    console.log(totalActiveElements);
    var visible = 100 / totalActiveElements;
    
     // console.log(visible);
     // console.log($accordion.find(div));
    
    if (totalActiveElements > 0) {
    	$accordion.find('div').css('width', '0px'); //reset all elements that only the active elements will be displayed. 
    	
    	$('.active').each(function(e) {
         
         	//console.log(this);
         
         var id = '#' + $(this).data('for');
         
            //console.log(id);

         $(id).css('width', visible + '%');
      });
      
    } 
    else {
     defaultView();  // if(totalActiveElements == 0);
    }
    
  }); 
	
});

	
	</script>
	
	</body>	

</html>

cloned · #25 (**permalink**) 11.02.2020, 12:14

Noch eine Lösung mit flexbox:

Code:

$(document).ready(function() {
  $('.js-btn').on('click', function() {
    const $this = $(this),
      $accordion = $('.accordion');

    $this.toggleClass('active');
    var totalActiveElements = $('button.active').length

    if (totalActiveElements > 0) {
      $accordion.find('> div').removeClass('active');

      $('button.active').each(function(e) {
        var id = '#' + $(this).data('for');
        $(id).toggleClass('active');
      });

    } else {
      $accordion.find('> div').removeClass('active'); // if(totalActiveElements == 0);
    }
  });
});

Code:

body {

  font-family: Arial, Helvetica, sans-serif;
  margin: 0px;
  padding: 0px;
}

#top-bar {
  width: 100%;
  height: 40px;
  border: 1px solid grey;
  background-color: #D8D8D8;
}

button.active {
  background-color: yellow;
}

#button {
  text-align: center;

}

button {
  background-color: rgb(208, 219, 224);
}


/* Accordion */

.accordion {
  height: 300px;
  display: flex;
}

#html {
  background-color: #2b5fd6
}

#css {
  background-color: green;
}

#js {
  background-color: red;
}

#output {
  background-color: rgb(211, 211, 211);
}

.accordion > div {
  display: none;
  flex: 1;
}

.accordion > div.active {
  display: block;
}

HTML bleibt gleich.

Iago2 · #26 (**permalink**) 14.02.2020, 12:13

Für die Default Einstellung (HTML links, Output rechts) habe ich folgendes versucht, was aber leider so nicht geht:

Code:

else {
      $accordion.find('html').addClass('active'); 
      $accordion.find('output').addClass('active'); 
    }  
    }

cloned · #27 (**permalink**) 14.02.2020, 14:54

Du solltest dich zumindest in die Grundlagen von CSS einlesen.
jQuery arbeitet mit CSS-Selektoren um Elemente auszuwählen. Ein Element <output> gibt es zB nicht, da kann er dann natürlich auch keine Klasse ändern.
Auch solltest du, wenn es dir weniger um CSS als mehr um das lernen von Js geht meinen Hinweis auf die im Browser eingebauten dev-tools annehmen. Dann setzt du dir breakpoints in deinem code und analysierst was zum jeweiligen Stand in einer Variable steht, bzw. in einem jquery Selector.

Iago2 · #28 (**permalink**) 15.02.2020, 14:03

Zitat:

Zitat von cloned

Du solltest dich zumindest in die Grundlagen von CSS einlesen.

Eher, Hirn einschalten vergessen!
Also alles easy, analog wie im Beispiel ohne Flex, auch die Breakpoints!

Else wird ja auch erst ausgeführt, wenn man die Buitton wieder ausschaltet.

Code:

<script type="text/javascript">
	
	
	$(document).ready(function() {
		
		function defaultView() {
    
     $('#html').addClass('active'); 
      $('#output').addClass('active'); 
      $('#css').removeClass('active');
      $('#js').removeClass('active');
		
  }
  
  defaultView();
				
  $('.js-btn').on('click', function() {
	  
    const $this = $(this),
      $accordion = $('.accordion');

    $this.toggleClass('active');
    var totalActiveElements = $('button.active').length;
    
    // console.log(visible);
     // console.log($accordion.find('div'));
    

    if (totalActiveElements > 0) {
      $accordion.find('> div').removeClass('active');

      $('button.active').each(function(e) {
		  
		  console.log(this);
		  
        var id = '#' + $(this).data('for');
        
         //console.log(id);
        $(id).toggleClass('active');
      });

    } else {
			 
		// console.log($('.accordion').find('div'));
		
		   defaultView();
    }
  });
});
	
	</script>

Themen-Optionen
Druckbare Version zeigen Jemanden per E-Mail auf dieses Thema hinweisen
Ansicht
Linear-Darstellung Zur Hybrid-Darstellung wechseln Zur Baum-Darstellung wechseln

Ähnliche Themen
Thema	Autor	Forum	Antworten	Letzter Beitrag
Felder Anordnung Problem	radon	CSS	1	19.11.2006 18:11