Баг в Accordion, не корректное отображение

385
27 марта 2017, 08:40

Здравствуйте!

Проблема такова, при сужении экрана из десктопной версии к мобильной аккордеон введёт себя неадекватно до тех пор пока не обновится страница в том же разрешении. Необходимо что бы текст находился ниже заголовка с именем. Прилагаю скриншот и jsfiddle

Заранее благодарю за помощь и потраченное время.

https://jsfiddle.net/qLhw27kp/2/

$( function() { 
    var icons = { 
      header: "up", 
      activeHeader: "down" 
    }; 
    $( "#accordion" ).accordion({ 
      icons: icons, 
      collapsible: true 
    }); 
    $( "#toggle" ).button().on( "click", function() { 
      if ( $( "#accordion" ).accordion( "option", "icons" ) ) { 
        $( "#accordion" ).accordion( "option", "icons", null ); 
      } else { 
        $( "#accordion" ).accordion( "option", "icons", icons ); 
      } 
    }); 
  } ); 
   
 
.comments-m{ 
		display: block; 
	} 
   
  .comments-content-m h2{ 
		text-align: center; 
		line-height: 40px; 
		font-size: 30px; 
		font-weight: 700; 
		color: #464646; 
	} 
   
  .comments-content-m .small{ 
		margin-top: 10px; 
		line-height: 30px; 
		font-size: 18px; 
		font-weight: 300; 
		color: #b7b7b7; 
	} 
   
  .commentators-m h3{ 
		display: -webkit-box; 
		display: -ms-flexbox; 
		display: flex; 
		-webkit-box-align: center; 
		    -ms-flex-align: center; 
		        align-items: center; 
		position: relative; 
		margin-top: 30px; 
		cursor: pointer; 
	} 
   
  .commentators-m h3 span{ 
		-webkit-box-flex: 1; 
		    -ms-flex-positive: 1; 
		        flex-grow: 1; 
		padding-left: 10px; 
		font-size: 18px; 
		font-weight: 700; 
		color: #464646; 
		 
	} 
   
  .commentators-m h4{ 
		padding-left: 48px; 
		padding-top: 10px; 
		padding-bottom: 10px; 
		font-size: 14px; 
		font-weight: 300; 
		color: #b7b7b7; 
	} 
   
  .commentators-m p{ 
		padding-left: 48px; 
		font-size: 16px; 
		line-height: 24px; 
		font-weight: 300; 
		color: #b7b7b7; 
	}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> 
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> 
<div class="comments-m"> 
			<div class="comments-content-m center"> 
				<h2 class="h2">Comments from our<br> customers</h2> 
				<h2 class="small">You can ask your question by filling in the form<br> Callback</h2> 
				<div class="comnnetators-m" id="accordion"> 
					<h3><img src="img/coms.png" alt=""><span>Paul Demichev</span></h3> 
					<div> 
						<h4>Web designer</h4> 
						<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p> 
					</div> 
 
					<h3><img src="img/coms.png" alt=""><span>Oleg Topanic</span></h3> 
					<div> 
						<h4>Программист</h4> 
						<p>This is a Bank that we trust. Our history of working with Alfa-Bank has about 15 years. We have almost from the base</p> 
					</div> 
 
					<h3><img src="img/coms.png" alt=""><span>Julia Usina</span></h3> 
					<div> 
						<h4>Повар</h4> 
						<p>In 2010, we came to the conclusion that we need a payroll project. Naturally, we considered the offers of different banks.</p> 
					</div> 
					 
					<h3><img src="img/coms.png" alt=""><span>Serdyuk Elena</span></h3> 
					<div> 
						<h4>Студентка</h4> 
						<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p> 
					</div> 
					 
					<h3><img src="img/coms.png" alt=""><span>Kulikov Vlad</span></h3> 
					<div> 
						<h4>Главный механик</h4> 
						<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p> 
					</div> 
					 
					<h3><img src="img/coms.png" alt=""><span>Andrey Tikhonov</span></h3> 
					<div> 
						<h4>Сварщик</h4> 
						<p>When making such important decisions as the conclusion of the wage project, it is important to simultaneously run a number of conditions.</p> 
					</div> 
					 
 
					 
				</div> 
			</div> 
		</div>

READ ALSO
Как удалить MySQL и установить MariaDB в Ubuntu?

Как удалить MySQL и установить MariaDB в Ubuntu?

Хочу установить MariaDB, сейчас установлено MySQLКак мне полностью удалить MySQL(вместе с паролями и тд) и установить MariaDB в Ubuntu? Сейчас при установке...

344
CRUD - проблема с update-ом пользователей

CRUD - проблема с update-ом пользователей

Приветствую! Делаю простое CRUD приложение, и столкнулся с проблемой update-а пользователейThe requested resource is not available - в данной теме помогли решить...

383
Вызов конвейерной функции Oracle. WebJava

Вызов конвейерной функции Oracle. WebJava

Подскажите как правильно получить данные WebJava имея такую pipelined функцию:

392
Слайд-шоу с кнопками next и prev в Android

Слайд-шоу с кнопками next и prev в Android

Я хочу создать приложение Слайд-шоу, где тексты будут озвучиваться при клике на playНо не могу сделать так, что бы они соответственно находились...

322