Problam with slider title in JQuery

Problam with slider title in JQuery - javascript

I make a slider.and work perfect but the title of each image do not show below.please see my code :
my Html code is
<div id="jDesign_slider">
<div id="jDesign">
<div id="jDesign_nav"> <a rel="img1" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Tulips3.jpg" /></a>
<a rel="img2" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Desert2.jpg" /></a>
<a rel="img3" href="javascript:;"><img src="http://localhost/wordpress/wp-content/uploads/2014/10/Chrysanthemum3.jpg" /></a>
</div>
<div id="jDesign_output">
<img id="img1" src="http://localhost/wordpress/wp-content/uploads/2014/10/Tulips3.jpg" />
<h3>title1</h3>
<img id="img2" src="http://localhost/wordpress/wp-content/uploads/2014/10/Desert2.jpg" />
<h3>title2</h3>
<img id="img3" src="http://localhost/wordpress/wp-content/uploads/2014/10/Chrysanthemum3.jpg" />
<h3>title3</h3>
</div>
<div class="clear"></div>
</div>
</div>
my Jquery code is
<script language="javascript">
$(document).ready(function() {
$("#jDesign_output img").not(":first").hide();
$("#jDesign_output h3").not(":first").hide();
$("#jDesign a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
$("#jDesign_output img").fadeOut();
$("#jDesign_output h3").fadeOut();
$("#" + this.rel).fadeIn();
}
});
});
</script>

The jQuery:
$(document).ready(function() {
// $("#jDesign_output img").not(":first").hide();
// $("#jDesign_output h3").not(":first").hide();
$("#jDesign_output div").not(":first").hide();
$("#jDesign a").click(function() {
if ( $("#" + this.rel).is(":hidden") ) {
// $("#jDesign_output img").fadeOut(100);
// $("#jDesign_output h3").fadeOut(100);
$("#jDesign_output div").hide(100);
//$("#" + this.rel).find('img').fadeIn(1000);
$("#" + this.rel).fadeIn(1000);
}
});
});
The HTML:
<div id="jDesign_slider">
<div id="jDesign">
<div id="jDesign_nav">
<a rel="img1" href="javascript:void(0);"><img src="image/page1_pic1.jpg" /></a>
<a rel="img2" href="javascript:void(0);"><img src="image/page1_pic2.jpg" /></a>
<a rel="img3" href="javascript:void(0);"><img src="image/page1_pic4.jpg" /></a>
</div>
<div id="jDesign_output">
<div id="img1">
<img src="image/page1_pic1.jpg" />
<h3>title1</h3>
</div>
<div id="img2">
<img src="image/page1_pic2.jpg" />
<h3>title2</h3>
</div>
<div id="img3">
<img src="image/page1_pic4.jpg" />
<h3>title3</h3>
</div>
</div>
<div class="clear"></div>
</div>
</div>

Related

jQuery not adding class to selected div id

I'm trying this code on website but it not working at all.
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
<script>
var link = jQuery(location).attr('pathname');
var fullurl = jQuery(location).attr('href');
if (link.split("/")[3] === "sardines") {
console.log("fullurl = " + fullurl);
console.log("pathname = " + link);
console.log("loop sardines");
jQuery('#sardines').addClass('capik');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('capik');
console.log("end addClass");
}
else{
console.log("end of loop");
}
<div id="all-product-categories">
<div class="all-categories">
<h2>All Categories</h2>
</div>
<div class="col-12">
<div id="sardines" class="sardines col-3">
<a href="/index.php/products/sardines" alt="Sardines">
<div class="box">
<span>SARDINES</span>
<img src="images/AYAM-product-categories/sardines.png" alt="sardines" width="150" height="150" />
</div>
</a>
</div>
<div id="saba" class="saba col-3">
<a href="/index.php/products/saba" alt="Saba">
<div class="box">
<span>SABA</span>
<img src="images/AYAM-product-categories/saba.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="mackerel" class="col-3">
<a href="/index.php/products/mackerel" alt="Mackerel">
<div class="box">
<span>MACKEREL</span>
<img src="images/AYAM-product-categories/mackerel.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="tuna" class="col-3">
<a href="/index.php/products/tuna" alt="Tuna">
<div class="box">
<span>TUNA</span>
<img src="images/AYAM-product-categories/tuna.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
<div class="col-12">
<div id="bakedbeans" class="col-3">
<a href="/index.php/products/baked-beans" alt="Baked Beans">
<div class="box">
<span>BAKED BEANS</span>
<img src="images/AYAM-product-categories/baked-beans.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="coconut" class="col-3">
<a href="/index.php/products/coconut" alt="Coconut">
<div class="box">
<span>COCONUT</span>
<img src="images/AYAM-product-categories/coconut.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="fruits" class="col-3">
<a href="/index.php/products/fruits" alt="Fruits">
<div class="box">
<span>FRUITS</span>
<img src="images/AYAM-product-categories/fruits.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
<div id="vegetables" class="col-3">
<a href="/index.php/products/vegetables" alt="Vegetables">
<div class="box">
<span>VEGETABLES</span>
<img src="images/AYAM-product-categories/vegetables.png" alt="saba" width="150" height="150" />
</div>
</a>
</div>
</div>
<div style="clear: both;"> </div>
Can someone help me with this issue. The script are running fine on the site but the jQuery not adding any class on the selected id. The loop also working fine. How to make the jQuery add the new class on the selected div id. Here i'm attaching the screenshot for the console that show the script are running fine and screenshot for the html. But the class are not added into the selected one.Look like it skipping the addClass script there.
This is when i'm on sardines page.

Wrap your code with jQuery(document).ready. Your code might have been executed before the html was fully loaded. Means that your selectors got executed when the element is not present yet..
// document.ready
jQuery(document).ready(function () {
var link = jQuery(location).attr('pathname');
console.log("url = " + link);
console.log(link.split("/")[3]);
console.log(link.split("/")[3] === "sardines");
if (link.split("/")[3] === "sardines") {
console.log("loop sardines");
jQuery('#sardines').addClass('class');
console.log("end addClass");
}
else if (link.split("/")[3] === "saba"){
console.log("loop saba");
jQuery('#saba').addClass('class');
console.log("end addClass");
}
else{
console.log("end of loop");
}
})
<!-- A not working example, inspect element you see there's no class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$("#test").addClass("test");
</script>
<div id="test">
Test
</div>
<!-- A working example, inspect element you see there's a class -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$("#test").addClass("test");
});
</script>
<div id="test">
Test
</div>
Hope that helps

Multiple slick slider in a single div

I need to create multiple slick slider in a single div .
There is some buttons related to slick. When I click on a button the slider changes corresponding to it.
I have tried it with kenwheeler slick slider but it doesn't work as I expect .It just creating a new slider item there.
$('.myslick').slick({
slidesToShow: 3,
slidesToScroll: 3
});
$('.newslick').on('click', function() {
jQuery('.myslick').html('<div>new content</div><div>new content</div><div>new content</div><div>new content</div> <div>new content</div><div>new content</div>').slick();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet"/>
<div class="myslick">
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
<div>your content</div>
</div>
<button class="newslick">New Slick</button>
<button class="featuredslick">Featured Slick</button>
<button class="oldslick">Old Slick</button>
I need to change the content dynamically with json or ajax.

I think this is you want to do. Its a custom function created with slick for my use.
class Tkslider{constructor(x) {this.x = x;var o,n,l;}slider(){var y=this.x[0];var co=(typeof(this.x[1]) != "undefined" && this.x[1] !== null) ? this.x[1] : {slidesToShow: 1,slidesToScroll: 1,arrows: false,fade: true,asNavFor: y+'_thumb',};var cn=(typeof(this.x[2]) != "undefined" && this.x[2] !== null) ? this.x[2] : {slidesToShow: 7,slidesToScroll: 1,asNavFor: y,dots: false,arrows: false,focusOnSelect: true};this.o = jQuery(y).slick(co);this.n = jQuery(y+'_thumb').slick(cn);this.l = jQuery(y).lightGallery({selector: 'a'});}destroy(){this.o.slick('unslick');this.n.slick('unslick');this.l.data('lightGallery').destroy(true);}}
setTimeout(function(){
jQuery(slider.x[0]).css('height',(jQuery(slider.x[0]).height()));
},2000);
var slider = new Tkslider(['#slider']);
var slide = slider.slider();
var slidejson ;
$('[data-slidertype]').bind("click", { key: slide }, function(event){
var newslide = '';
var newslide_thumb = '';
if($(this).data('slidertype') === 'camera'){
slidejson = [
{'src':'http://placehold.it/300x150&text=a1','thumb':'http://placehold.it/100x100&text=a1'},
{'src':'http://placehold.it/300x150&text=a2','thumb':'http://placehold.it/100x100&text=a2'},
{'src':'http://placehold.it/300x150&text=a3','thumb':'http://placehold.it/100x100&text=a3'},
{'src':'http://placehold.it/300x150&text=a4','thumb':'http://placehold.it/100x100&text=a4'},
{'src':'http://placehold.it/300x150&text=a5','thumb':'http://placehold.it/100x100&text=a5'},
{'src':'http://placehold.it/300x150&text=a6','thumb':'http://placehold.it/100x100&text=a6'},
{'src':'http://placehold.it/300x150&text=a7','thumb':'http://placehold.it/100x100&text=a7'},
];
}
else if($(this).data('slidertype') === 'threesix'){
slidejson = [
{'src':'http://placehold.it/300x150&text=b1','thumb':'http://placehold.it/100x100&text=b1'},
{'src':'http://placehold.it/300x150&text=b2','thumb':'http://placehold.it/100x100&text=b2'},
{'src':'http://placehold.it/300x150&text=b3','thumb':'http://placehold.it/100x100&text=b3'},
{'src':'http://placehold.it/300x150&text=b4','thumb':'http://placehold.it/100x100&text=b4'},
{'src':'http://placehold.it/300x150&text=b5','thumb':'http://placehold.it/100x100&text=b5'},
{'src':'http://placehold.it/300x150&text=b6','thumb':'http://placehold.it/100x100&text=b6'},
{'src':'http://placehold.it/300x150&text=b7','thumb':'http://placehold.it/100x100&text=b7'},
{'src':'http://placehold.it/300x150&text=b8','thumb':'http://placehold.it/100x100&text=b8'},
{'src':'http://placehold.it/300x150&text=b9','thumb':'http://placehold.it/100x100&text=b9'},
{'src':'http://placehold.it/300x150&text=b10','thumb':'http://placehold.it/100x100&text=b10'},
{'src':'http://placehold.it/300x150&text=b11','thumb':'http://placehold.it/100x100&text=b11'},
];
}
else if($(this).data('slidertype') === 'vdo'){
slidejson = [
{'src':'http://placehold.it/300x150&text=c1','thumb':'http://placehold.it/100x100&text=c1'},
{'src':'http://placehold.it/300x150&text=c2','thumb':'http://placehold.it/100x100&text=c2'},
{'src':'http://placehold.it/300x150&text=c3','thumb':'http://placehold.it/100x100&text=c3'},
{'src':'http://placehold.it/300x150&text=c4','thumb':'http://placehold.it/100x100&text=c4'},
{'src':'http://placehold.it/300x150&text=c5','thumb':'http://placehold.it/100x100&text=c5'},
{'src':'http://placehold.it/300x150&text=c6','thumb':'http://placehold.it/100x100&text=c6'},
{'src':'http://placehold.it/300x150&text=c7','thumb':'http://placehold.it/100x100&text=c7'},
{'src':'http://placehold.it/300x150&text=c8','thumb':'http://placehold.it/100x100&text=c8'},
{'src':'http://placehold.it/300x150&text=c9','thumb':'http://placehold.it/100x100&text=c9'},
{'src':'http://placehold.it/300x150&text=c10','thumb':'http://placehold.it/100x100&text=c10'},
];
}
$.each(slidejson, function (x, y) {
newslide += '<div data-index="x"><img src="'+y.src+'" alt="One" class="img-responsive w100"/></div>';
newslide_thumb += '<div><img src="'+y.thumb+'" class="img-responsive w100"/></a></div>';
});
slider.destroy();
$('#slider').html(newslide);
$('#slider_thumb').html(newslide_thumb);
slide = slider.slider();
});
body *{outline:none;}
.slick-slide {height: auto;}
.slider-nav-thumbnails .slick-slide {opacity: 0.5;}
.slider-nav-thumbnails .slick-slide.slick-current {opacity: 1;}
.w100{width: 100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/js/lightgallery-all.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/lightgallery/1.6.6/css/lightgallery.min.css" />
<div class="container-fluid">
<div class="col-md-12">
<!-- MAIN SLIDES -->
<div id="slider" class="">
<div data-index="1">
<a href="http://placehold.it/300x150&text=one">
<img src="http://placehold.it/300x150&text=one" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="2">
<a href="http://placehold.it/300x150&text=two">
<img src="http://placehold.it/300x150&text=two" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="3">
<a href="http://placehold.it/300x150&text=three">
<img src="http://placehold.it/300x150&text=three" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="4">
<a href="http://placehold.it/300x150&text=four">
<img src="http://placehold.it/300x150&text=four" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="5">
<a href="http://placehold.it/300x150&text=five">
<img src="http://placehold.it/300x150&text=five" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="6">
<a href="http://placehold.it/300x150&text=six">
<img src="http://placehold.it/300x150&text=six" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="7">
<a href="http://placehold.it/300x150&text=seven">
<img src="http://placehold.it/300x150&text=seven" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="8">
<a href="http://placehold.it/300x150&text=eight">
<img src="http://placehold.it/300x150&text=eight" alt="One" class="img-responsive w100">
</a>
</div>
<div data-index="9">
<a href="http://placehold.it/300x150&text=nine">
<img src="http://placehold.it/300x150&text=nine" alt="One" class="img-responsive w100">
</a>
</div>
</div>
<!-- THUMBNAILS -->
<div id="slider_thumb" class="slider-nav-thumbnails">
<div><img src="http://placehold.it/100x100&text=one" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=two" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=three" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=four" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=five" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=six" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=seven" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=eight" class="img-responsive w100"></div>
<div><img src="http://placehold.it/100x100&text=nine" class="img-responsive w100"></div>
</div>
<div>
<button data-slidertype="camera">Image</button>
<button data-slidertype="threesix">360</button>
<button data-slidertype="vdo">Video</button>
</div>
</div>

how to add multiple css style to same view

I am using Kendo mobile for my app,I have suitation that i need to add multiple class to my View ,when the PostedImageUrl is not null, i need add some class based on UI and when the PostedImageUrl is null i need to change UI, How i can achieve this kindly suggest.
<div data-role=view>
<ul class="oneClass" data-role="listview" id="Feeds-listview" data -bind="foreach:data">
<li style="background-color:#FFF;white-space:normal">
<div style="width:100%">
<label class="profile-username front" data-bind="text:username"></label>
<div style="float:left">
<span data-bind="text:userId" style="display:none"></span>
<div style="padding:0px!important">
<img class="profileimage fimage" data-bind="attr: { src:ImageSrc }" />
</div>
</div>
<div style="float:left">
<img class="emoji" data-bind="attr: { src: emoji }" />
</div>
<input type="checkbox" class="listcheckbox "/>
<div data-bind="if:delete" class="delete">
<a href="#" id="delete" data-bind="click:$root.Delete"><img
src="images/bin.png" style="width:24px;height:24px;float:right;margin-
top:10px;" class="front" /></a>
</div>
</div>
<div >
<span data-bind="text:PostedImageID"></span>
<img style="height: 200px;width: 300px;margin-top: 10px;" data-
bind="attr: { src:PostedImageUrl }" />
</div>
<div data-bind="click:$root.Like" class="Like" >
</div>
<a href="#" data-
bind="click:$root.open"class="two"style="float:right;margin-top:47px">
<span class="count" data-bind="text:TotalCount"></span>
top:-10px" />
</span>
</a>
<span class="" data-bind="text:createdAt"></span>
</li>
</ul>
<div>

Try this maybe, use $("img").on("load", function() { .. }
$(document).ready(function() {
$("img").on("load", function() {
alert('SRC updated!: ' + $(this).attr("src"));
});
});
example:
http://jsfiddle.net/b4ujn03w/3/
$(document).ready(function() {
$("img").on("load", function() {
alert('SRC updated!: ' + $(this).attr("src"));
});
setTimeout(function() {
$("img").attr("src", "http://images2.fanpop.com/images/photos/5700000/Random-random-5719763-1280-800.jpg");
}, 1000);
setTimeout(function() {
$("img").attr("src", "https://dummyimage.com/600x400/000/fff");
}, 3000);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img src='http://images5.fanpop.com/image/photos/30800000/-Random-random-30843841-1920-1080.jpg' />

Is it possible to change a div order one after another using jQuery?

I am not sure how to ask this and using correct wording or not.
I have this wrapper
<div class="posts">
</div>
And I am appending two divs inside this using following jQuery.
$.ajax({
type: 'GET',
url: rootURL,
dataType: 'json',
success: function(data){
$.each(data, function(index, value) {
jQuery('.posts').append('<div class="post_entry">
<div class="post_thumb">
<img width="100%" src="' + value.better_featured_image.source_url + '" alt="" title="" />
</div>
<div class="post_details">
<p>' + value.excerpt.rendered + '</p>
</div>
</div>');
});
},
error: function(error){
console.log(error);
}
});
so this will render the HTML like this.
<div class="posts">
<div class="post_entry"> <!-- this will be repeated till how many posts have in the loop-->
<div class="post_thumb">
<img width="100%" src="image.jpg" alt="" title="" />
</div>
<div class="post_details">
<p>excerpt</p>
</div>
</div>
</div>
But what I want is
in first post structur should be image thenn excerpt,
second post should be excerpt and image then again
third post sholud be image then excert then again
fourth post should be excerpt and image then again and so on...
so the rendered HTML shuould be like:
<div class="posts">
<div class="post_entry">
<div class="post_thumb">
<img width="100%" src="image1.jpg" alt="" title="" />
</div>
<div class="post_details">
<p>excerpt1</p>
</div>
</div>
</div>
<div class="posts">
<div class="post_entry">
<div class="post_details">
<p>excerpt2</p>
</div>
<div class="post_thumb">
<img width="100%" src="image2.jpg" alt="" title="" />
</div>
</div>
</div>
<div class="posts">
<div class="post_entry">
<div class="post_thumb">
<img width="100%" src="image3.jpg" alt="" title="" />
</div>
<div class="post_details">
<p>excerpt3</p>
</div>
</div>
</div>
<div class="posts">
<div class="post_entry">
<div class="post_details">
<p>excerpt4</p>
</div>
<div class="post_thumb">
<img width="100%" src="image4.jpg" alt="" title="" />
</div>
</div>
</div>
and so on..
Is it possible to get this?

$.ajax({
type: 'GET',
url: rootURL,
dataType: 'json',
success: function(data){
$.each(data, function(index, value) {
if(index % 2 == 0){
jQuery('.posts').append('<div class="post_entry">
<div class="post_thumb">
<img width="100%" src="' + value.better_featured_image.source_url + '" alt="" title="" />
</div>
<div class="post_details">
<p>' + value.excerpt.rendered + '</p>
</div>
</div>');
}else{
jQuery('.posts').append('<div class="post_entry">
<div class="post_details">
<p>' + value.excerpt.rendered + '</p>
</div>
<div class="post_thumb">
<img width="100%" src="' + value.better_featured_image.source_url + '" alt="" title="" />
</div>
</div>');
}
});
},
error: function(error){
console.log(error);
}
});

instead of append() use after() or insertAfter(). and you can build your html format base on your array.
it should be.
jQuery('.posts').after('your html');
for more info please refer this link

Need a default choice selected

I am working on website and i have this code:
http://liveweave.com/KDPgcO
It shows a menu that displays some content when a url is clicked, That is what i want but the only thing is that i need that one choice is selected or displayed by default:
So when the page loads that javascript must show the first choice on the menu by default.
the code:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<img src="../images/fondo1.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="second">
<img src="../images/fondo2.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="third">
<img src="../images/fondo3.png" alt="" height="" width="800"/>
</div>
<div class="textWord_about" data-link="fourth">
<img src="../images/fondo4.png" alt="" height="" width="800"/>
</div>
<CENTER>
<div id="menu_about">
<a class="link" href="#about" data-link="first"><img src="../images/edif.png" alt="" height="" width="65"/></a>
<a class="link" href="#about" data-link="second"><img src="../images/admininver.png" alt="" height="" width="65"/></a>
<a class="link" href="#about" data-link="third"><img src="../images/finan.png" alt="" height="" width="60"/></a>
<a class="link" href="#about" data-link="fourth"><img src="../images/inmo.png" alt="" height="" width="60"/></a>
</div>
</CENTER>
</div>
</div>
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
});
</script>
Thanks for any comments that you can provide.

You could trigger click on the first link:
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
$('.textWord_about').hide();
$('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
width: '200px'
}, 300);
}).first().trigger('click');
</script>

Develop Reference

JavaScript is the programming language of the Web.

Problam with slider title in JQuery - javascript

Related

jQuery not adding class to selected div id

Multiple slick slider in a single div

how to add multiple css style to same view

Is it possible to change a div order one after another using jQuery?

Need a default choice selected

Categories

Resources