смещение блоков при клике

[maximamus]

рони,
понял, спасибо

[maximamus]

и снова - Здравствуйте!)
в общем мучал-мучал и не домучал

Учитывая тяжесть конструкции, с инпутами и лейбами все едет и кошмар, что получается.
Можно ли сделать так, исходя из моего примера, что бы при клике на боковые табы, текст перемещался в центральный?

[рони]

maximamus,
делайте на jquery - и лишних тегов не будет и сам текст летать не будет сделайте блок для текста

[maximamus]

рони,
это я так понял с этого примера

<script>
     $(function(){
       var div = $("div"), temp = div[1];
       div.click(function() {
         var left = $(this).css("left");
         $(this).stop().animate({left: 200},1500);
         $(temp).stop().animate({left: left},1500);
         temp = this;
      });
});

  </script>

[рони]

maximamus,
да его можно доработать - если будет ваш хотябы код html css

[maximamus]

рони,

jQuery(document).ready(function ($) {

	// Spoiler
	$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-spoiler-title', function (e) {
		var $title = $(this),
			$spoiler = $title.parent(),
			bar = ($('#wpadminbar').length > 0) ? 28 : 0;
		// Open/close spoiler
		$spoiler.toggleClass('su-spoiler-closed');
		// Close other spoilers in accordion
		$spoiler.parent('.su-accordion').children('.su-spoiler').not($spoiler).addClass('su-spoiler-closed');
		// Scroll in spoiler in accordion
		if ($(window).scrollTop() > $title.offset().top) $(window).scrollTop($title.offset().top - $title.height() - bar);
		e.preventDefault();
	});
	$('.su-spoiler-content').removeAttr('style');
	// Tabs
	$('body:not(.su-other-shortcodes-loaded)').on('click', '.su-tabs-nav span', function (e) {
		var $tab = $(this),
			data = $tab.data(),
			index = $tab.index(),
			is_disabled = $tab.hasClass('su-tabs-disabled'),
			$tabs = $tab.parent('.su-tabs-nav').children('span'),
			$panes = $tab.parents('.su-tabs').find('.su-tabs-pane'),
			$gmaps = $panes.eq(index).find('.su-gmap:not(.su-gmap-reloaded)');
		// Check tab is not disabled
		if (is_disabled) return false;
		// Hide all panes, show selected pane
		$panes.hide().eq(index).show();
		// Disable all tabs, enable selected tab
		$tabs.removeClass('su-tabs-current').eq(index).addClass('su-tabs-current');
		// Reload gmaps
		if ($gmaps.length > 0) $gmaps.each(function () {
			var $iframe = $(this).find('iframe:first');
			$(this).addClass('su-gmap-reloaded');
			$iframe.attr('src', $iframe.attr('src'));
		});
		// Set height for vertical tabs
		tabs_height();
		// Open specified url
		if (data.url !== '') {
			if (data.target === 'self') window.location = data.url;
			else if (data.target === 'blank') window.open(data.url);
		}
		e.preventDefault();
	});

	// Activate tabs
	$('.su-tabs').each(function () {
		var active = parseInt($(this).data('active')) - 1;
		$(this).children('.su-tabs-nav').children('span').eq(active).trigger('click');
		tabs_height();
	});

	// Activate anchor nav for tabs and spoilers
	anchor_nav();

	// Lightbox
	$('.su-lightbox').each(function () {
		$(this).on('click', function (e) {
			e.preventDefault();
			e.stopPropagation();
			if ($(this).parent().attr('id') === 'su-generator-preview') $(this).html(su_other_shortcodes.no_preview);
			else {
				var type = $(this).data('mfp-type');
				$(this).magnificPopup({
					type: type,
					tClose: su_magnific_popup.close,
					tLoading: su_magnific_popup.loading,
					gallery: {
						tPrev: su_magnific_popup.prev,
						tNext: su_magnific_popup.next,
						tCounter: su_magnific_popup.counter
					},
					image: {
						tError: su_magnific_popup.error
					},
					ajax: {
						tError: su_magnific_popup.error
					}
				}).magnificPopup('open');
			}
		});
	});
	// Tables
	$('.su-table tr:even').addClass('su-even');
	// Frame
	$('.su-frame-align-center, .su-frame-align-none').each(function () {
		var frame_width = $(this).find('img').width();
		$(this).css('width', frame_width + 12);
	});
	// Tooltip
	$('.su-tooltip').each(function () {
		var $tt = $(this),
			$content = $tt.find('.su-tooltip-content'),
			is_advanced = $content.length > 0,
			data = $tt.data(),
			config = {
				style: {
					classes: data.classes
				},
				position: {
					my: data.my,
					at: data.at,
					viewport: $(window)
				},
				content: {
					title: '',
					text: ''
				}
			};
		if (data.title !== '') config.content.title = data.title;
		if (is_advanced) config.content.text = $content;
		else config.content.text = $tt.attr('title');
		if (data.close === 'yes') config.content.button = true;
		if (data.behavior === 'click') {
			config.show = 'click';
			config.hide = 'click';
			$tt.on('click', function (e) {
				e.preventDefault();
				e.stopPropagation();
			});
			$(window).on('scroll resize', function () {
				$tt.qtip('reposition');
			});
		} else if (data.behavior === 'always') {
			config.show = true;
			config.hide = false;
			$(window).on('scroll resize', function () {
				$tt.qtip('reposition');
			});
		} else if (data.behavior === 'hover' && is_advanced) {
			config.hide = {
				fixed: true,
				delay: 600
			}
		}
		$tt.qtip(config);
	});

	// Expand
	$('.su-expand').each(function () {
		var $this = $(this),
			$content = $this.children('.su-expand-content'),
			$more = $this.children('.su-expand-link-more'),
			$less = $this.children('.su-expand-link-less'),
			data = $this.data(),
			col = 'su-expand-collapsed';

		$more.on('click', function (e) {
			$content.css('max-height', 'none');
			$this.removeClass(col);
		});
		$less.on('click', function (e) {
			$content.css('max-height', data.height + 'px');
			$this.addClass(col);
		});
	});

	function is_transition_supported() {
		var thisBody = document.body || document.documentElement,
			thisStyle = thisBody.style,
			support = thisStyle.transition !== undefined || thisStyle.WebkitTransition !== undefined || thisStyle.MozTransition !== undefined || thisStyle.MsTransition !== undefined || thisStyle.OTransition !== undefined;

		return support;
	}

	// Animations is supported
	if (is_transition_supported()) {
		// Animate
		$('.su-animate').each(function () {
			$(this).one('inview', function (e) {
				var $this = $(this),
					data = $this.data();
				window.setTimeout(function () {
					$this.addClass(data.animation);
					$this.addClass('animated');
					$this.css('visibility', 'visible');
				}, data.delay * 1000);
			});
		});
	}
	// Animations isn't supported
	else {
		$('.su-animate').css('visibility', 'visible');
	}

	function tabs_height() {
		$('.su-tabs-vertical').each(function () {
			var $tabs = $(this),
				$nav = $tabs.children('.su-tabs-nav'),
				$panes = $tabs.find('.su-tabs-pane'),
				height = 0;
			$panes.css('min-height', $nav.outerHeight(true));
		});
	}

	function anchor_nav() {
		// Check hash
		if (document.location.hash === '') return;
		// Go through tabs
		$('.su-tabs-nav span[data-anchor]').each(function () {
			if ('#' + $(this).data('anchor') === document.location.hash) {
				var $tabs = $(this).parents('.su-tabs'),
					bar = ($('#wpadminbar').length > 0) ? 28 : 0;
				// Activate tab
				$(this).trigger('click');
				// Scroll-in tabs container
				window.setTimeout(function () {
					$(window).scrollTop($tabs.offset().top - bar - 10);
				}, 100);
			}
		});
		// Go through spoilers
		$('.su-spoiler[data-anchor]').each(function () {
			if ('#' + $(this).data('anchor') === document.location.hash) {
				var $spoiler = $(this),
					bar = ($('#wpadminbar').length > 0) ? 28 : 0;
				// Activate tab
				if ($spoiler.hasClass('su-spoiler-closed')) $spoiler.find('.su-spoiler-title:first').trigger('click');
				// Scroll-in tabs container
				window.setTimeout(function () {
					$(window).scrollTop($spoiler.offset().top - bar - 10);
				}, 100);
			}
		});
	}

	if ('onhashchange' in window) $(window).on('hashchange', anchor_nav);

	$('body').addClass('su-other-shortcodes-loaded');
});

вот вроде к этом файле срабатывает функция табов

[рони]

maximamus,
непонимаю ваш ход мыслей

[рони]

maximamus,
более на эту тему помочь не могу

<!DOCTYPE HTML>

<html>

<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  div  {
     width: 200px;
     height: 100px;
     position:  absolute;
     transition: all 0.8s ease-out;
  }

  .tab1 {

    left : 0;
  }
  .tab2{

    left: 200px;
  }
  .tab3 {
     left: 400px;
  }
  .test{
     width: 600px;
     position: relative;
     background-image: linear-gradient(to right, #FFCE0A 0%,#5252FF  33%,#FFFF66 33%, #FFFF66 66%,#5252FF 66%, #FFCE0A);
  }
   div.show{
    width: 600px;
    height: 0px;
    top: 100px;

    overflow: hidden;
    transition:  none;
    text-align: center;
  }
  div.tab2:nth-child(1) ~  div:nth-child(4){ transition: all 0.8s ease-out;
      height: 100px; background-color: #FFCE0A;
  }
  div.tab2:nth-child(2) ~  div:nth-child(5){  transition: all 0.8s ease-out;
      height: 100px; background-color: #FFFF66;
  }
  div.tab2:nth-child(3) ~  div:nth-child(6){  transition: all 0.8s ease-out;
      height: 100px; background-color: #5252FF;
  }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  <script>
     $(function(){
       var div = $(".test div:not(.show)"), temp = div[1];
       div.click(function() {
         var cls = this.className;
         this.className = temp.className;
         temp.className = cls;
         temp = this;
      });
});
  </script>
</head>

<body>
    <div class='test'>
    <div class='tab1'>1</div>
    <div class='tab2'>2</div>
    <div class='tab3'>3</div>
    <div class='show'>товар 1</div>
    <div class='show'>товар 2</div>
    <div class='show'>товар 3</div>
    </div>
</body>

</html>

[maximamus]

рони,
и на этом спасибо) в который раз)

[рони]

maximamus,
строка 54 добавлено :not(.show)