$(document).ready(function () {
$(".nav-item").click(function () {
$(".content").load("about.html");
});
});
<section id="header">
<nav class="navbar navbar-expand-md bg-dark navbar-dark">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
</ul>
</div>
</nav>
</section>
<div class="content"></div>
<div class="jumbotron "><h5>We make web app mobile app IOT and AI</h5>
<h1>We partner with startups founder</h1>
<h1>to build robust digital product</h1>
<div class="mt-5">
<button type="button">Start a Program</button>
</div>
</div>
<div class="discription text-center">
<h1>Digital Agency In India</h1>
<h3>Strategic.Creative.Technical</h3>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. <br>
Iure dolores quo illo, et ipsa, hic consequuntur quae quia vero, nostrum aspernatur quisquam.<br>
Velit mollitia sapiente blanditiis animi illo, possimus repudiandae.<br>
</p>
</div>
<div class="content">
<div class="row">
<div class="col">
<P class="text-center">want to bring idea to you life?<br>
<button type="button">Call Us Today</button>
</P>
</div>
<div class="col">
<P class="text-center">1 tiny idea + team work = Result.<br>
<button type="button ">Start your Project</button>
</P>
</div>
</div>
</div>
<div>
<h1 class="text-center"><p>EXPLORE YOUR WORK</p></h1>
</div>
<div class="Strack">
<div class="row">
<div class="col">
</P>
</div>
<div class="col">
<h3>S-Track</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</P>
</div>
</div>
</div>
<div class="SmartCrm">
<div class="row">
<div class="col">
<h3>Smart CRM</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</div>
<div class="col">
</div>
</div>
</div>
<div class="Fleemarket">
<div class="row">
<div class="col">
</P>
</div>
<div class="col">
<h3>O-Fleet management</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br>
Assumenda veritatis fuga quo illum quibusdam, fugiat, sit adipisci magni voluptas<br>
distinctio quisquam, facilis dolorem ab. Totam cupiditate aperiam delectus laudantium?<br>
Fugiat.
</p>
<button type="button ">Read More</button>
</P>
</div>
</div>
</div>
<div class="Fleemarket text-center">
<div class="row">
<div class="col">
Are you ready to start you project?
</P>
</div>
<div class="col">
<p>
Want to see our more work?
</p>
</div>
</div>
</div>
<div class="text-center">
OUR DIGITAL SERVICE
</div>
<div class="ods text-center">
<div class="row">
<div class="col-sm-3">
<h5>Strategy</h5>
</div>
<div class="col-sm-3">
<h5>UI/UX</h5>
</div>
<div class="col-sm-3">
<h5>development</h5>
</div>
<div class="col-sm-3">
<h5>AI</h5>
</div>
</div>
</div>
<div>
<p class="text-center">FIND US HERE</p>
</div>
<div class="cities text-center">
<div class="row">
<div class="col">
<p>Chennai</p>
</div>
<div class="col">
<p>United Kingdom</p>
</div>
</div>
</div>
<div class="text-center">
<h1>map</h1>
</div>
<div class="footer">
<div class="row">
<div class="col-sm-2">
Logo
</div>
<div class="col-sm-5">
<div class="row">
<div class="col">
<p> OUR services</p>
<p> Blog</p>
<p>Tech</p>
<p>our Process</p>
<p>About us</p>
</div>
<div class="col">
<p>Content</p>
<p>Career</p>
<p>Terms and Conditions</p>
<p>Privacy</p>
</div>
</div>
</div>
<div class="col-sm-5">
</div>
</div>
</div>
</section>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
I'm trying to load one HTML to another main HTML using the load function. I have a navbar which has 4 links such as ABOUT, CONTACT, BLOG, SUPPORT. So incase if I click on the link ABOUT, I want the new content to load and already existing content should go. I have already loaded the ABOUT content to main page but I want already exsisting content to go and then new content to display.
PHP gives out native include and requires functions, but if using HTML, I found this working and useful: https://www.w3schools.com/howto/howto_html_include.asp
For removing the body part, you can write a JavaScript function to hide the elements.
Related
I have a problem with starting with the new beginning line after text is passed by Image.
I just wrote many sentences in the <p> tag in the portfolio-description part and all these texts are appeared in that part not starting with the new beginning line under image if the last line of text is passed by Image.
Here is the alignment issue https://ibb.co/825KFHJ
What I want to do that : https://ibb.co/RvM48rn
How can I do that? What file should I use? (CSS or JS)
<section id="portfolio-details" class="portfolio-details">
<div class="container">
<div class="row gy-4">
<div class="col-lg-6">
<div class="portfolio-details-slider swiper-container">
<div class="swiper-wrapper align-items-center">
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
<div class="swiper-slide">
<img src="https://thumbs.dreamstime.com/b/projects-concept-black-chalkboard-d-rendering-handwritten-top-view-office-desk-lot-business-office-supplies-79906734.jpg" alt="">
</div>
</div>
<div class="swiper-pagination"></div>
</div>
</div>
<div class="col-lg-6">
<div class="portfolio-info">
<h3>Project information</h3>
<ul>
<li><strong>Category</strong>: Web design</li>
<li><strong>Customer</strong>: ASU Company</li>
<li><strong>Project Date</strong>: 01 March, 2020</li>
</ul>
</div>
<div class="portfolio-description">
<h2>Project Title</h2>
<p>
Autem ipsum nam porro corporis rerum. Quis eos dolorem eos itaque inventore commodi labore quia quia. Exercitationem repudiandae officiis neque suscipit non officia eaque itaque enim. Voluptatem officia accusantium nesciunt est omnis tempora consectetur
dignissimos. Sequi nulla at esse enim cum deserunt eius.
</p>
</div>
</div>
</div>
</div>
</section>
I am trying to add a class to make a child .modal-container visible when clicking on the parent, which works, but then the second part of the code doesn't seem to work. e.g. when I click on the top right corner X sign .close-modal the modal doesn't disappear.
This is how the code looks like:
$(".animals-images").on('click', function() {
$(this).find(".modal-container").addClass("show");
});
$(".close-modal").on('click', function() {
$(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
});
This is how the .show class style on CSS looks like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
If on the last part of the jQuery code I put CSS ("opacity", "0"); instead of removeClass it works (but only once obviously). So I don't quite understand what is wrong here.
I wanted to do this in vanilla JavaScript, so if you have any idea how to do this it would be so much appreciated!
HTML:
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim!
Aut odio nobis vitae tenetur assumenda sit enim quo explicabo!
Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
Consider that this is repeated 10 times (for 10 different images/modals), I am trying to find a way to do this with a few lines of code instead of selecting 10 individual times
Update (based on OP comment)
thanks for the answer #dippas , is there any way that I can make this code functional for many other images?
You've got to loop through each button then toggling class show on each event (e.currentTarget)
const buttonsOpen = document.querySelectorAll('.click-me'),
buttonsClose = document.querySelectorAll('.close-modal')
buttonsOpen.forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.nextElementSibling.classList.add('show')))
buttonsClose.forEach(el => el.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show')))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 1
</p>
</div>
</div>
</div>
</div>
<hr />
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 2
</p>
</div>
</div>
</div>
</div>
Here is a simple solution using vanilla JS
const buttonOpen = document.querySelector('.click-me'),
buttonClose = document.querySelector('.close-modal'),
modal = document.querySelector('.modal-container')
buttonOpen.addEventListener('click', () => modal.classList.add('show'))
//this
//buttonClose.addEventListener('click', () => modal.classList.remove('show'))
//or this
buttonClose.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show'))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim! Aut odio nobis vitae tenetur assumenda sit enim quo explicabo! Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
I have an angular project that has bootstrap 4.
The container has two rows. I want one row to be at the bottom of the container always.
I have tried justify-content: flex-end; , bottom:0; and other methods, but none seem to work.
Also note: the parent component just has min-height: 100vh; in it's CSS. (So the board is always full height)
Here is the code and to properly see the situation:
<div class="sight-slider bg-success">
slider goes here <br>
slider goes here <br>
</div>
<div class="container">
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Unde culpa officiis obcaecati cupiditate
consequatur ducimus molestiae, quod quos incidunt! Laboriosam ab
modi nobis nesciunt voluptate eum tempora pariatur possimus et?
</div>
<div class="sight-logic-info">
Bla <br>
Phone <br>
Hours <br>
Website
</div>
</div>
</div>
<div class="row btn-controls"> <!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>
Bootstrap has a few class built-in that can help.
You tell us you set min-height:100vh on the parent so i'll add this parent missing here and will use twice flex with flex-direction:column boostrap class : .flex-column.
To fill entire space, flex:1;/* or only flex-grow:1; */ is required and a custom class is needed.
finally, margin-top:auto ,via mt-auto class, will push the buttons container all the way down to bottom if it needs to.
/* custom class */
.min-h100vh {
min-height: 100vh;
}
.flex-1 {
flex: 1;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class=" d-flex flex-column min-h100vh"><!-- flex boxe turned into a single column to minfill window -->
<div class="sight-slider bg-success">
slider goes here
</div>
<div class="container flex-1 d-flex flex-column "><!-- column again + fill entire space left -->
<div class="row">
<div class="col-12 sight-info">
<h2> Title of Sight </h2>
<div class="sight-description">
Lorem, ipsum dolor ...
</div>
<div class="sight-logic-info">
Bla bla bla ...
</div>
</div>
</div>
<div class="row btn-controls mt-auto"><!-- margin-top:auto; to go all the way down -->
<!-- THIS ROW I NEED AT BOTTOM -->
<div class="col-3 bg-danger">
<button type="button" class="btn btn-exit">X</button>
</div>
<div class="col-9 bg-warning">
<button type="button" class="btn btn-go">Go to location</button>
</div>
</div>
</div>
You can find the boostrap class about flex here https://getbootstrap.com/docs/4.0/utilities/flex/ margin and padding here https://getbootstrap.com/docs/4.0/utilities/spacing/ , ...
Since there are 2 items inside .container (div.row and div.row.btn-controls), you can set flex, column and justify as space-between, like this:
.container {
display: flex;
justify-content: space-between;
flex-direction: column;
}
So it should make that row stay at bottom.
Other possible solution depending on the situation:
As you mention bottom: 0. Also set position: relative to it. Or position: absolute and on its parent position: relative to make it as a reference.
Hi i use bootstrap slider to slide element now i want when slider are slide than add a class in another section element. so try to do when .carousel-indicators li:nth-child(1) has class active than add class active also on .single-recent.first and than when .carousel-indicators li:nth-child(2) has class active than add class active on .single-recent.second and remove class active from .single-recent.first and any other all .single-recent element i have. and repeat it dynamically again and again.... but i didn't success to do that.
Here is the HTML code what i use:
<div id="launchgame-jumbotron-carousel" class="carousel slide carousel-fade work-carousel" data-ride="carousel">
<ol class="carousel-indicators">
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="0" class="active"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="1"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="2"></li>
<li data-target="#launchgame-jumbotron-carousel" data-slide-to="3"></li>
</ol>
<div class="carousel-inner" role="listbox">
<div class="item active">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
<div class="item">
<p> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat quia fuga, velit iure dolorum perferendis!</p>
</div>
</div>
<a class="left jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="prev"><i class="fa fa-angle-left"></i></a>
<a class="right jumbotron-control" href="#launchgame-jumbotron-carousel" role="button" data-slide="next"><i class="fa fa-angle-right"></i></a>
</div>
<section id="recent-featured" class="recent-featured-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="recent-featured-wrap">
<h3>Featured Work</h3>
<div class="single-recent first">
<div class="single-inner-img">
<img src="img/work/featured/featured-01.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent second">
<div class="single-inner-img">
<img src="img/work/featured/featured-02.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent third">
<div class="single-inner-img">
<img src="img/work/featured/featured-03.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
<div class="single-recent fourth">
<div class="single-inner-img">
<img src="img/work/featured/featured-04.jpg" alt="">
</div>
<div class="single-active-effect">
<i class="fa fa-eye" aria-hidden="true"></i>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
And the jQuery :
jQuery(document).ready(function(){
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(1)").hasClass('active')) {
$(".single-recent.first").addClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(2)").hasClass('active') {
$(".single-recent.second").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.third").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(3)").hasClass('active')) {
$(".single-recent.third").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.fourth").removeClass('active');
}
if ($("#launchgame-jumbotron-carousel ol.carousel-indicators li:nth-child(4)").hasClass('active')) {
$(".single-recent.fourth").addClass('active');
$(".single-recent.first").removeClass('active');
$(".single-recent.second").removeClass('active');
$(".single-recent.third").removeClass('active');
} });
Please help me to find out a way...
Hi friends I try learning jquery but I get some issues,
red label below picture- when i clicked it toggle is opening but when I clicked second one again first div is opening
my html
<ul class="otel-filtre-fiyat-tab">
<li class="otel-views"><a href="#"><img src="http://anitur.streamprovider.net/images/otel-filtre/d2.png" alt="" class="memnuniyet-durum" />
<strong>88/100</strong>
<span class="otel-goruntuleme">274 Görüntüleme</span>
</a></li>
<li class="otel-prices"><a href="#">
<strong>Tüm Fiyatlar</strong>
<span class="otel-goruntuleme">Size Özel en uygun fiyatlar</span>
</a></li>
</ul>
</div><!--otel filtre ozellikler-->
<div class="clr"></div>
</div><!--otel tek liste-->
<div class="otel-filtre-tab">
<div class="otel-tab-icerik otel-full-detay">
<div class="otel-degerlendirme">
<div class="degerlendirme-baslik">Değerlendirme</div>
<div class="otel-tab-detay">
<div class="degerlendirme-not">
<div class="c100 p85 green">
<span>85%</span>
<div class="slice">
<div class="bar"></div>
<div class="fill"></div>
</div>
</div><!--dairesel genel değerlendirme-->
</div><!-- degerlendirme not -->
<div class="degerlendirme-yorum">
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizli,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
<div class="yorum-bar">
<div class="yorum-bilgi">
<p>
<span class="otel-yorum-kisi">Hakan2020</span>
<span class="otel-yorum-konum">Denizsiz,Türkiye</span>
<span class="otel-yorum-tarih">26 Eylül 2015</span>
</p>
</div><!-- yorum bilgi -->
<div class="otel-yorum-profil">
<img src="http://anitur.streamprovider.net/images/otel-filtre/profile.jpg" alt="" />
</div>
<div class="yorum-content">
<h3>“Özellikle, yeme içme kalitesi arayanlar için...”</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque provident accusantium sint tempore! Fugiat debitis maxime eos? Devamını oku</p>
</div>
</div><!-- yorum bar-->
</div><!-- degerlendirme yorum -->
</div>
<div class="clr"></div>
</div><!-- otel degerlendirme-->
<h3>Genel Değerlendirme</h3>
<div class="otel-genel-degerlendirme">
<div class="tum-degerlendirmeler">
Tüm Değerlendirmeler
<h4>Tüm İzlenimler</h4>
<h4 class="degerlendirme">%77 Çok İyi <span>2524 yoruma göre</span></h4>
</div><!--tum degerlendirmeler-->
<div class="diger-degerlendirmeler">
<ul class="tab-degerlendirme">
<li>%35 Çiftler</li>
<li>%35 Aile</li>
<li>%35 İş Seyahati</li>
<li>%35 Yalnız Gezginler</li>
</ul><!--tab menuler-->
<div class="tab-degerlendirme-icerik">
<div class="tab-filtre-icerik" id="ciftler">
<div class="demo-show2">
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 1 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 2 'in içeriği</div>
<h3>KAHVALTI <span class="accord-progress"></span><span class="mmn-oran">59%</span><span class="span-list">“Kahvaltı İyi”</span><span class="accord-chevron"></span></h3>
<div>Deneme 3 'in içeriği</div>
</div>
<!--<div id="progressbar-durum">
<div></div>
</div>-->
</div>
<div class="tab-filtre-icerik" id="aile">aile..
%35
</div>
<div class="tab-filtre-icerik" id="is-seyahati">iş seyahati..</div>
<div class="tab-filtre-icerik" id="yalniz-gezginler-bg">yalnız gezginler..</div>
</div><!-- tab icerik kismi-->
</div><!--diger degerlendirmeler-->
</div><!-- otel genel değerlendirme-->
</div><!-- tab icerik-->
<div class="otel-tab-icerik otel-fiyat-detay-icerik">otel içerik 2..</div><!-- tab icerik -->
</div><!-- otel filtre tab -->
toggle.js
$(document).ready(function(){
$(".otel-views a").on("click",function(){
$(".otel-full-detay:first").slideToggle();
return false;
});
});
what was my mistake ?
and codepen link:
http://codepen.io/cowardguy/pen/rxdpLp
You need to use other selector to reach your needed element. First you need to climb up in dom tree with .parent() or similar selector and then go down to your element in dom tree with .children() or .find() or other similar selector.
This is your working example:
$(".otel-views a").on("click",function(){
$(this).parents('.otel-tekli-listeleme').find('.otel-full-detay').slideToggle();
return false;
});
Here's fixed codepen