Einzelnen Beitrag anzeigen
  #5 (permalink)  
Alt 04.02.2020, 09:53
cloned cloned ist offline
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 30.01.2014
Beiträge: 2.027
cloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekanntcloned ist jedem bekannt
Standard

Meine Frage bleibt die gleiche, wieso schreibst du für jeden Fall einen eigenen Block? Bei 10 Elementen schreibst du dann 100 verschiedene Blöcke?

Hier mal ein Ansatz wie es kürzer geht, ohne doppelten Code:

Am besten auf jsfiddle.net gehen und code dort einfügen (nicht vergessen jquery bei javascript auszuwählen)

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:rgb(208,219,224);
			}	
			
			
		/* Accordion */
		
		#accordion {
			list-style: none;
			margin: 0;
			padding: 0;
			height: 500px;
			overflow: hidden;
			background: #7d8d96;}
 
		#accordion li {
			float: 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;
			}

Code:
<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 id="body-div">
		<ul id="accordion">
      <li id="html">   
        <h3>HTML</h3>     
      </li>
      <li id="css">
        <h3>CSS</h3>      
      </li>
      <li id="js">
		    <h3>JavaScript</h3>
      </li>
      <li id="output">
		    <h3>Output</h3>
      </li>
  </ul>
  	
	</div>
Code:
$(document).ready(function(){		
  
  function defaultView() {
    $("#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%");
  }
  
  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($accordion.find('li'));
    
    if (totalActiveElements > 0) {
    	$accordion.find('li').css('width', '0px');
    	$('.active').each(function(e) {
      	console.log(this);
         var id = '#' + $(this).data('for');
         console.log(id);
         $(id).css('width', visible + '%');
      });
    } else {
     defaultView();
    }
    
  });
  
	
	
	});
Mit Zitat antworten