i need to make my text expand if i click on "more" and if i click on another "more"class i want to make it so my text retracts from all the other. so basically that there only is one "more"class is expanded. also i wanted to make the text change from more to less if the text div is open.
This is my html code
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="images/horses/siente.png" alt="sientje"></img>
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="images/horses/siente.png" alt="sientje"></img>
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
</div>
</div>
</div>
</div>
And this is my script
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(this).next(".text").slideToggle(500);
$(this).text($(this).text() == 'LESS' ? 'MORE' : 'LESS').toggleClass('up');
});
$(".expand").click(function() {
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideToggle(500);
}
});
});
I hope you will help me
Change your script as this.
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(".text").slideUp(500);
$(".expand").text('MORE');
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideToggle(500);
$(this).text('LESS');
}
});
});
https://jsfiddle.net/drh8snj5/
Here's a fiddle with text that shows and hides:
https://jsfiddle.net/mupfu53p/1/
$(document).ready(function() {
$('.content').each(function() {
var thisText = $(this).text();
var shortText = thisText.substring(0, thisText.indexOf(" ", 50)) + '...';
$(this).data('longText', thisText);
$(this).data('shortText', shortText);
$(this).text($(this).data('shortText'));
});
$('.more').click(function(e) {
e.preventDefault();
var thisSib = $(this).prev('.content');
var currentText = $(thisSib).text();
if (currentText === $(thisSib).data('shortText')) {
$(thisSib).text($(thisSib).data('longText'));
} else {
$(thisSib).text($(thisSib).data('shortText'));
}
});
});
Not sure if it is what you want but perhaps the other answers are closer.
try this :
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(".text").slideUp(500);
$(".expand").text('MORE');
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
} else {
$(this).next(".text").slideDown(500);
$(this).text('LESS');
}
});
});
Please find the code below. I Think it will solve your problem.
FYI, html image tag will be like this
$(document).ready(function() {
$(".text").hide();
$(".expand").click(function() {
$(".more").html('LESS');
$(".text").slideUp(500);
if ($(this).next(".text").is(":visible")) {
$(this).next(".text").slideUp(500);
$(".more").html('MORE');
} else {
$(this).next(".text").slideToggle(500);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
TEST1
TEST#
TEST3
TEST4
TEST5
TEST6
TEST7
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
TEST1
TEST#
TEST3
TEST4
TEST5
TEST6
TEST7
</div>
</div>
</div>
</div>
This should work.
$(document).ready(function() {
$(".expand").click(function() {
var txt = $(this).find('.more').text();
$('.more').text('MORE');
$(".text").slideUp(500);
$(this).next('.text').slideToggle(500);
$(this).find('.more').text('LESS');
});
});
.expand {
cursor: pointer;
}
.text {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content_horses" id="page">
<div class="accordeon" class="een">
<div class="sientje">
<img class="photo" src="http://placehold.it/150" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe optio aperiam, accusamus assumenda! Quidem accusantium, officia, esse ipsam magni nostrum asperiores cum quod itaque, est obcaecati perspiciatis amet alias quia?
</div>
</div>
</div>
</div>
<div class="accordeon" class="twee">
<div class="sientje">
<img class="photo" src="http://placehold.it/150" alt="sientje" />
<div class="name">
SIENTJE
</div>
<div class="expand">
<div class="more">MORE</div>
</div>
<div class="text">
<div class="sientje_t">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis animi eum mollitia provident aut cum eos expedita commodi, sunt, quam, odio error. Tempore quasi, tenetur blanditiis debitis deleniti nobis deserunt!
</div>
</div>
</div>
</div>
Related
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>
$(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.
Can anyone please help me to close other accordions when one is open. Currently, all accordions remain open when clicked. Here is the code.
$('.accordion-tabs-toggle').next().hasClass('show');
$('.accordion-tabs-toggle').next().removeClass('show');
$('.accordion-tabs-toggle').next().slideUp(350);
$(document).on('click', '.accordion-tabs-toggle', function() {
var $this = $(this);
$this.siblings('.faq-content').toggleClass('show');
$this.toggleClass('active');
$this.siblings('.faq-content').slideToggle(350);
$this.find('.dashicons.dashicons-arrow-down.custom-toggle-tabs').toggleClass('open');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="itinerary-content">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_1">
1.Auctor aspernatur dictum
</div>
</a>
<div class="faq-content" style="display: none;">
<p>Auctor aspernatur dictum perspiciatis </p>
</div>
</div>
<div class="itinerary-content">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_2">
2.Auctor aspernatur dictum
</div>
</a>
<div class="faq-content" style="display: none;">
<p>Auctor aspernatur dictum perspiciatis</p>
</div>
</div>
you can achieve your goal using below code. It's simple and clean way.
$(document).ready(function () {
$('.accordion-tabs-toggle').on('click', function (e) {
e.preventDefault();
$(this).toggleClass('active').siblings('.faq-content').slideToggle();
$(this).parent().siblings().find('.accordion-tabs-toggle').removeClass('active').siblings('.faq-content').slideUp();
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="itinerary-content">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_1">
1.Auctor aspernatur dictum
</div>
</a>
<div class="faq-content" style="display: none;">
<p>Auctor aspernatur dictum perspiciatis </p>
</div>
</div>
<div class="itinerary-content">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_2">
2.Auctor aspernatur dictum
</div>
</a>
<div class="faq-content" style="display: none;">
<p>Auctor aspernatur dictum perspiciatis</p>
</div>
</div>
Try this:
HTML:
<div class="accordion">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_1">
1.Auctor aspernatur dictum
</div>
</a>
</div>
<div class="panel">
<div class="faq-content">
<p>Auctor aspernatur dictum perspiciatis </p>
</div>
</div>
<div class="accordion">
<a href="javascript:void(0);" class="accordion-tabs-toggle">
<div class="title tid_2">
2.Auctor aspernatur dictum
</div>
</a>
</div>
<div class="panel">
<div class="faq-content">
<p>Auctor aspernatur dictum perspiciatis</p>
</div>
</div>
CSS:
div.panel {
display: none;
}
div.panel.show {
display: block !important;
}
JS:
var acc = document.getElementsByClassName("accordion");
var panel = document.getElementsByClassName('panel');
for (var i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
var setClasses = !this.classList.contains('active');
setClass(acc, 'active', 'remove');
setClass(panel, 'show', 'remove');
if (setClasses) {
this.classList.toggle("active");
this.nextElementSibling.classList.toggle("show");
}
}
}
function setClass(els, className, fnName) {
for (var i = 0; i < els.length; i++) {
els[i].classList[fnName](className);
}
}
I am making a script that switches the position of div's with a jQuery animation.
The problem that I'm running into is that if I want to swap 2 div's from different line's, this works fine, but if there is another div on the second line it will be affected by the animation.
I want the second div on the second line to stay in place while the animation is happening.
If you expand the snippet and hover on the last div of the first line and click the arrow to the right you will see what I mean.
$(document).on("click", ".button-row .btn", function(e) {
e.preventDefault();
var select = $(this).closest("[class^=col-]");
var value = $(this).attr('value');
var section = $(this).closest(".row");
if (select.offset().top == section.offset().top) {}
if (value == 'weg') {
select.remove();
} else if (value == 'moveL') {
var selectprev = select.prev();
var selectnext = select.next();
if (select.offset().top == selectprev.offset().top) {
var left = select.width() + 30;
select.animate({
marginLeft: left * -2,
}, {
duration: 750,
queue: false
});
selectprev.animate({
marginLeft: left,
}, {
duration: 750,
queue: false
});
setTimeout(function() {
$("[class^=col-]").css('margin-left', '0px');
select.clone().insertBefore(selectprev);
selectprev.clone().insertBefore(selectprev);
selectprev.remove();
select.remove();
updatebuttons();
}, 750);
} else {
var left = select.width() + 30;
var top = select.height();
select.animate({
marginLeft: left * 2,
marginTop: top * -2,
}, {
duration: 750,
queue: false
});
selectprev.animate({
marginLeft: left * -2,
marginTop: top * 1,
}, {
duration: 750,
queue: false
});
setTimeout(function() {
$("[class^=col-]").css('margin', '0px');
select.clone().insertBefore(selectprev);
selectprev.clone().insertBefore(selectprev);
selectprev.remove();
select.remove();
updatebuttons();
}, 750);
}
} else if (value == 'moveR') {
var selectprev = select.prev();
var selectnext = select.next();
if (select.offset().top == selectnext.offset().top) {
var left = select.width() + 30;
selectnext.animate({
marginLeft: left * -2,
}, {
duration: 750,
queue: false
});
select.animate({
marginLeft: left,
}, {
duration: 750,
queue: false
});
setTimeout(function() {
$("[class^=col-]").css('margin-left', '0px');
select.clone().insertAfter(select.next());
select.next().clone().insertBefore(select);
selectnext.remove();
select.remove();
updatebuttons();
}, 750);
} else {
var left = select.width() + 30;
var top = select.height();
selectnext.animate({
marginLeft: left * 2,
marginTop: top * -2,
}, {
duration: 750,
queue: false
});
select.animate({
marginLeft: left * -2,
marginTop: top * 1,
}, {
duration: 750,
queue: false
});
setTimeout(function() {
$("[class^=col-]").css('margin', '0px');
select.clone().insertAfter(select.next());
select.next().clone().insertBefore(select);
selectnext.remove();
select.remove();
updatebuttons();
}, 750);
}
} else if (value == 'clone') {
select.clone().insertAfter(select);
}
updatebuttons();
});
function updatebuttons() {
$('.button-links').show();
$('.button-rechts').show();
$('.button-prullenbak').show();
buttonsdisabel();
}
function buttonsdisabel() {
$("section").each(function() {
$(this).find("div[class^=col-]").first().find('.button-links').hide();
$(this).find("div[class^=col-]").last().find('.button-rechts').hide();
if ($(this).find('[class^=col-]').length == 1) {
$(this).find("div[class^=col-]").find('.button-prullenbak').hide();
}
$('.button-row').fadeIn();
});
}
$(document).on("mouseover", "section", function(e) {
e.preventDefault();
if ($(this).find('[class^=col-]').length >= 1 && $(this).find('.snippet-col-nav').length == 0) {
$(this).find('[class^=col-]').each(function() {
$(this).append('<div class="button-row snippet-col-nav btn-group" style="position:absolute;height: 56px; top:0;right:20px;">' +
'<a class="btn btn-sm btn-primary button-links" value="moveL" title="Schuif 1 plek naar links"><i class="fa fa-arrow-left"></i></a>' +
'<a class="btn btn-sm btn-primary button-rechts" value="moveR" title="Schuif 1 plek naar rechts"><i class="fa fa-arrow-right"></i></a>' +
'<a class="btn btn-sm btn-inverse" value="clone" title="Clone"><i class="fa fa-clone"></i></a>' +
'<a class="btn btn-sm btn-danger button-prullenbak" value="weg" title="Vewijder"><i class="fa fa-trash"></i></a>' +
'</div>');
$('.button-row').hide();
});
}
updatebuttons();
});
$(document).on("mouseleave", "section", function(e) {
$('.button-row').remove();
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.3.1/css/all.css" integrity="sha384-mzrmE5qonljUremFsqc01SB46JvROS7bZs3IO2EmfFsd15uHvIt+Y8vEf7N7fWAU" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="afbbox-3x-v4-1" class="afbbox-3x-v4 pv-30">
<div class="container">
<div class="editContent">
<h2>Kopregel</h2>
</div>
<div class="row">
<div class="col-sm-4 cloneable">
<div class="image-box style-2 mb-20 bordered dark-bg">
<div class="iviewer_wrapper">
<div class="iviewer">
<img src="https://via.placeholder.com/360x270" alt="">
</div>
</div>
<div class="body">
<div class="body-inner">
<p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">div 1 </span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
<div class="editContent">
<p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
</div>
</div>
Lees verder<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<div class="col-sm-4 cloneable">
<div class="image-box style-2 mb-20 bordered dark-bg">
<div class="iviewer_wrapper">
<div class="iviewer">
<img src="https://via.placeholder.com/360x270" alt="">
</div>
</div>
<div class="body">
<div class="body-inner">
<p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">Jun, 2016</span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
<div class="editContent">
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
</div>
</div>
Lees verder<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<div class="col-sm-4 cloneable">
<div class="image-box style-2 mb-20 bordered dark-bg">
<div class="iviewer_wrapper">
<div class="iviewer">
<img src="https://via.placeholder.com/360x270" alt="">
</div>
</div>
<div class="body">
<div class="body-inner">
<p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">div 1 </span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
<div class="editContent">
<p>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
</div>
</div>
Lees verder<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<div class="col-sm-4 cloneable">
<div class="image-box style-2 mb-20 bordered dark-bg">
<div class="iviewer_wrapper">
<div class="iviewer">
<img src="https://via.placeholder.com/360x270" alt="">
</div>
</div>
<div class="body">
<div class="body-inner">
<p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">Jun, 2016</span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
<div class="editContent">
<p>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
</div>
</div>
Lees verder<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
<div class="col-sm-4 cloneable">
<div class="image-box style-2 mb-20 bordered dark-bg">
<div class="iviewer_wrapper">
<div class="iviewer">
<img src="https://via.placeholder.com/360x270" alt="">
</div>
</div>
<div class="body">
<div class="body-inner">
<p class="small mb-10 text-muted"><i class="icon-calendar"></i> <span class="editContent">Jun, 2016</span> <i class="pl-10 icon-tag-1"></i> Categorie</p>
<div class="editContent">
<p>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam atque ipsam nihil, adipisci rem minus? Voluptatem distinctio laborum porro aspernatur.</p>
</div>
</div>
Lees verder<i class="fa fa-arrow-right pl-10"></i>
</div>
</div>
</div>
</div>
</div>
</section>
Edit: I was going trough my questions and saw this was never given an answer.
I have found a solution back in time. By placing divs on the places that swap. And making the divs that swap position absolute it will solve my issue.
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