Https://adamnet.works/

[mike_barry]

https://adamnet.works/

Hi I’m trying to get the Tabs section to move the arrow over the seleted image.

I’ve used the following code to get the textsection to switch, but I can’t get the arrows to switch.

I’d also like to make a smooth transition witht he arrows.

(function($){
$(’#tabsection .x-container’).on(‘click’, ‘.x-column’, function(){
var textshow = $(this).index(’#tabsection .x-column’);
$(’#textsection .x-container’).addClass(‘hidden’);
$(’#textsection .x-container’).eq(textshow).removeClass(‘hidden’);
$(’#textsection .x-container’).addClass(‘tab-selector’);
});
})(jQuery);

(function($){
$(’#tabsection .x-container’).on(‘click’, ‘.x-column’, function(){
var arrowShow = $(this).index(’#ember2387 .x-column’);
$(’#ember2387 .x-container’).addClass(‘hidden’);
$(’#ember2387 .x-container’).eq(arrowShow).removeClass(‘hidden’);
$(’#ember2387 .x-container’).addClass(‘tab-selector’);
console.log(arrowShow;)
})(jQuery);

[ruenel]

Hello There,

Thanks for writing in!

Please add a corresponding ID for your image and the arrow image. You can then use the individual click events of the image to display the arrows. For example, you have image-1, image-2, image-3 and image-4. At the same time, you can have arrow-1, arrow-2, arrow-3, and arrow-4. Have your code this way:

(function($){
  $('#image-1').on('click', function(){ 
    $(this).parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-1').parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-1').removeClass('hidden');
  });

  $('#image-2').on('click', function(){ 
    $(this).parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-2').parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-2').removeClass('hidden');
  });

  $('#image-3').on('click', function(){ 
    $(this).parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-3').parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-3').removeClass('hidden');
  });

  $('#image-4').on('click', function(){ 
    $(this).parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-4').parents('.x-container').find('.x-img').addClass('hidden');
    $('#arrow-4').removeClass('hidden');
  });
})(jQuery);

And you can the use this custom css:

.x-img.hidden {
    opacity: 0;
    display: block !important; 
    transition: opacity 1s ease;
}

You must use opacity and not display none so that the arrow will stay in place.

Hope this helps.