Einzelnen Beitrag anzeigen
  #24 (permalink)  
Alt 10.02.2020, 21:45
Iago2 Iago2 ist offline
Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 13.09.2005
Beiträge: 75
Iago2 befindet sich auf einem aufstrebenden Ast
Standard

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>

Mit Zitat antworten