Einzelnen Beitrag anzeigen
  #1 (permalink)  
Alt 27.01.2020, 16:43
Iago2 Iago2 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 44
Iago2 befindet sich auf einem aufstrebenden Ast
Standard Accordion / Felder Anordnung, Steuerung funktioniert nicht

Hallo,

Ich size hier einer Steuerung für ein Akkordion. Ich habe 4 Felder (HTML,CSS,JS,Output).
Es müsste 13 Möglichkeiten der Anzeige/Anordnung der Felder geben (4 x 1 ,6 x 2, 2 x 3, 1 x 4)

Ich habe mich hier eine Lösung versucht. die eigentlich stimmig sein müsste: Wer sich das anschauen mag:

HTML-Code:
<!DOCTYPE html>
<html>

	<head>
	
	<title>codeplayer</title>
	
	<script type="text/javascript" src="jquery-3.4.1.min.js"></script>
	<script src="jquery-ui-1.12.1.custom/jquery-ui.js"></script>
	
	
	<link href="jquery-ui-1.12.1.custom/jquery-ui.css" rel="stylesheet">
	<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 {
			text-align:center;
			
			
			}
		
		button {
			
			background:rgb(208,219,224);
			}	
			
			
		/* Accordion */
		
		#accordion {
			list-style: none;
			margin: 0;
			padding: 0;
			height: 500px;
			overflow: hidden;
			background: #7d8d96;}
 
		#accordion li {
			float: left;
			border-left:
			display: block;
			height: 500px;
			width: 50px;
			padding: 15px 0;
			overflow: hidden;
			color: #fff;
			text-decoration: none;
			font-size: 16px;
			line-height: 1.5em;
			border-left: 1px solid #fff;}
 
 
		#accordion li.active {
			width: 450px;
			}
			
			
			
		li:nth-child(1) {
			background-color: #2b5fd6;
			}
		
		li:nth-child(2) {
			background-color: green;
			}	
	
		li:nth-child(3) {
			background-color: red;
			}
	
					

	</style>
	
	<body>
	
	<div id="top-bar">
		
		<div id="button">
	
		<button id="HTML-B">HTML</button>
		<button id="CSS-B">CSS</button>
		<button id="JS-B">Javascript</button>
		<button id="output-B">Output</button>
	
	
		</div>
	</div>
	
	<div id="body-div">
	
		<ul id="accordion">
      <li>   
        <h3>HTML</h3>     
      </li>
      <li>
        <h3>CSS</h3>      
      </li>
      <li>
		<h3>JavaScript</h3>
      </li>
      <li>
		<h3>Output</h3>
   
    </li>
  </ul>
  	
	</div>
	
	
	<script type="text/javascript">
		
		$(document).ready(function(){
			
			
			
		var HTMLb = false;
		var CSSb = false;
		var JSb = false;
		var OUTb = false;
		
		
	$("#accordion li:first").css("width","50%");
	$("#accordion li:nth-of-type(2)").css("width","0px");
	$("#accordion li:nth-of-type(3)").css("width","0px");
	$("#accordion li:first").css("width","50%");
  	
  	
  	// HTML Button
    
    $("#HTML-B").click(function() {		
		
		if((CSSb == false) && (JSb == false) && (OUTb == false)) {		//100%
		$("#accordion li:first").css("width","100%");			
		}
		if((CSSb == true) && (JSb == false) && (OUTb == false)) {		//50%	
		$("#accordion li:first").css("width","50%");	
		}
		if((CSSb == false) && (JSb == true) && (OUTb == false)) {		//50%	
		$("#accordion li:first").css("width","50%");	
		}
		if((CSSb == false) && (JSb == false) && (OUTb == true)) {		//50%
		$("#accordion li:first").css("width","50%");	
		}
		if((CSSb == true) && (JSb == true) && (OUTb == false)) {		//33%
		$("#accordion li:first").css("width","33%");	
		}
		if((CSSb == false) && (JSb == true) && (OUTb == true)) {		//33%
		$("#accordion li:first").css("width","33%");	
		}
		if((CSSb == true) && (JSb == false) && (OUTb == true)) {		//33%	
		$("#accordion li:first").css("width","33%");	
		
		}
		
		//toggle
		
		if(HTMLb == false) { 
			$("#HTML-B").css("background","rgb(244,250,88)");
			HTMLb = true; }		
			
		else { 		
			$("#HTML-B").css("background","rgb(208,219,224)");
			HTMLb = false; }	
					
		
	});

		// CSS Button :nth-of-type(2)
	
	 $("#CSS-B").click(function() {		
		 
		 
		if((HTMLb == false) && (JSb == false) && (OUTb == false)) {		//100%
		$("#accordion li:nth-of-type(2)").css("width","100%");			
		}		
		if((HTMLb == true) && (JSb == false) && (OUTb == false)) {		//50%	
		$("#accordion li:nth-of-type(2)").css("width","50%");	
		}		
		if((HTMLb == false) && (JSb == true) && (OUTb == false)) {		//50%	
		$("#accordion li:nth-of-type(2)").css("width","50%");	
		}		
		if((HTMLb == false) && (JSb == false) && (OUTb == true)) {		//50%
		$("#accordion li:nth-of-type(2)").css("width","50%");	
		}		
		if((HTMLb == true) && (JSb == true) && (OUTb == false)) {		//33%
		$("#accordion li:nth-of-type(2)").css("width","33%");	
		}				
		if((HTMLb == false) && (JSb == true) && (OUTb == true)) {		//33%
		$("#accordion li:nth-of-type(2)").css("width","33%");	
		}		
		if((HTMLb == true) && (JSb == false) && (OUTb == true)) {	//33%	
		$("#accordion li:nth-of-type(2)").css("width","33%");	
		
		}
		 
		 //toggle
		 	 			 
		if(CSSb == false) { 
			$("#CSS-B").css("background","rgb(244,250,88)");
			CSSb = true; }		
			
		else { 		
			$("#CSS-B").css("background","rgb(208,219,224)");
			CSSb = false; }		
	});
	
	
	// JS Button :nth-of-type(3)
	
	$("#JS-B").click(function() {
		
		if((CSSb == false) && (HTMLb == false) && (OUTb == false)) {		//100%
		$("#accordion li:nth-of-type(3)").css("width","100%");			
		}		
		if((CSSb == true) && (HTMLb == false) && (OUTb == false)) {		//50%	
		$("#accordion li:nth-of-type(3)").css("width","50%");	
		}		
		if((CSSb == false) && (HTMLb == true) && (OUTb == false)) {		//50%	
		$("#accordion li:nth-of-type(3)").css("width","50%");	
		}		
		if((CSSb == false) && (HTMLb == false) && (OUTb == true)) {		//50%
		$("#accordion li:nth-of-type(3)").css("width","50%");	
		}		
		if((CSSb == true) && (HTMLb == true) && (OUTb == false)) {		//33%
		$("#accordion li:nth-of-type(3)").css("width","33%");	
		}		
		if((CSSb == false) && (HTMLb == true) && (OUTb == true)) {		//33%
		$("#accordion li:nth-of-type(3)").css("width","33%");	
		}
		if((CSSb == true) && (HTMLb == false) && (OUTb == true)) {		//33%	
		$("#accordion li:nth-of-type(3").css("width","33%");	
		
		}
		
		//toggle
		
		
		if(JSb == false) { 
			$("#JS-B").css("background","rgb(244,250,88)");
			JSb = true; }		
			
		else { 		
			$("#JS-B").css("background","rgb(208,219,224)");
			JSb = false; }	
	});
	
	// Output Button li:last
		
	$("#output-B").click(function() {
		
		if((CSSb == false) && (JSb == false) && (HTMLb == false)) {		//100%
		$("#accordion li:last").css("width","100%");			
		}	
		if((CSSb == true) && (JSb == false) && (HTMLb == false)) {		//50%	
		$("#accordion li:last").css("width","50%");	
		}		
		if((CSSb == false) && (JSb == true) && (HTMLb == false)) {		//50%	
		$("#accordion li:last").css("width","50%");	
		}		
		if((CSSb == false) && (JSb == false) && (HTMLb == true)) {		//50%
		$("#accordion li:last").css("width","50%");	
		}		
		if((CSSb == true) && (JSb == true) && (HTMLb == false)) {		//33%
		$("#accordion li:last").css("width","33%");	
		}
		if((CSSb == false) && (JSb == true) && (HTMLb == true)) {		//33%
		$("#accordion li:last").css("width","33%");	
		}
		if((CSSb == true) && (JSb == false) && (HTMLb == true)) {	//33%	
		$("#accordion li:last").css("width","33%");	
		
		}
		
		//toggle
		
		if(OUTb == false) { 
			$("#output-B").css("background","rgb(244,250,88)");
			OUTb = true; }		
			
		else { 		
			$("#output-B").css("background","rgb(208,219,224)");
			OUTb = false; }	
	
	});	
	
	});
     
	</script>
	
	
	
	
	</body>

</html>


Mit Zitat antworten
Sponsored Links