Develop Reference

Open modal by clicking on a button and hide modal by clicking on a close button

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>

How to reuse one html code to another html using Jquery?

$(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.

jQuery animation issue with swapping div's

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.

Hide Div tab on clicking the tab

I have two div tags(Div1,Div2) on my html page with few tabs, And I would like to hide the div2 tag on page load, And display it on clicking the other tab by hiding div1 tag.
Can any one help me how can I do this by using DOM or by using javascript
function myFunction() {
alert("helloworld");
document.getElementById("div2").style.display = "none";
}
function myFunction1() {
alert("helloworld");
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.visibility = "visible";
}
function myFunctionone() {
alert("helloworld");
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.visibility = "visible";
}
div.round1 {
border: 1px solid deepskyblue;
border-radius: 4px;
height: 170px;
width: 30%;
margin: auto;
}
.up {
vertical-align: -145px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Case</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body onload="myFunction()">
<div id="div1" class="round1">
<table>
<tr>
<td>
<img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
<div id="div2" class="round1">
<table>
<tr>
<td>
<img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
<br>
<div align="left">
<div class="container">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" href="#home" onclick="myFunctionone()">One</a></li>
<li><a data-toggle="tab" href="#menu1" onclick="myFunction1()">Two</a></li>
<li><a data-toggle="tab" href="#menu1">Functional</a></li>
<li><a data-toggle="tab" href="#menu3">Three</a></li>
</ul>
<div class="tab-content">
<div id="home" class="tab-pane fade in active">
<h3>One</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text.</p>
</div>
<div id="menu1" class="tab-pane fade">
<h3>Two</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
</div>
<div id="menu2" class="tab-pane fade">
<h3>Three</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
</div>
<div id="menu3" class="tab-pane fade">
<h3>Others</h3>
<p>If a browser cannot find an image, it will display the alternate textIf a browser cannot find an image, it will display the alternate text</p>
</div>
</div>
</div>
</div>
</body>
</html>

$(document).ready(function () {
$('#div2').hide()
$('.nav a').click(function () {
$('#div2').show()
$('#div1').hide()
})
})
Do you mean this?

first of all make the
.div2{
display:none;
}
so it should be hidden on page load.
then on the tabs put a data-target attribute like follow:
<div class="tab-pane fade" data-target="div2">
then on click do follow
$(".tab-pane").on("click",function(){
var item = $(this).attr("data-target");
if (item == "div2"){
$(".div2").show()
$(".div1").hide()
}else{
$(".div1").show()
$(".div2").hide()
}
}

please try
<script>
myFunction();
function myFunction() {
document.getElementById("div2").style.display = "none";
}
function myFunction1() {
document.getElementById("div1").style.display = "none";
}
function myFunctionone() {
document.getElementById("div2").style.visibility = "visible";
}
</script>

Remove on page load function and add display:none for div2.
//change jquery to toogle div
function myFunction1() {
$("#div2").show();
$("#div1").hide();
}
function myFunctionone() {
$("#div1").show();
$("#div2").hide();
}

I think that display = "block" will help you.
document.getElementById("div2").style.display = "block";

Complete and Simple Tab implementation with help of some css and JQuery here:
<div class="wrapper">
<h1>Quick and Simple Tabs</h1>
<p>A quick and easy method for tabs that supports multiple tab groups on one page.</p>
<ul class="tabs clearfix" data-tabgroup="first-tab-group">
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<section id="first-tab-group" class="tabgroup">
<div id="tab1">
<h2>Heading 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nulla deserunt consectetur ratione id tempore laborum laudantium facilis reprehenderit beatae dolores ipsum nesciunt alias iusto dicta eius itaque blanditiis modi velit.</p>
</div>
<div id="tab2">
<h2>Heading 2</h2>
<p>Adipisci autem obcaecati velit natus quos beatae explicabo at tempora minima voluptates deserunt eum consectetur reiciendis placeat dolorem repellat in nam asperiores impedit voluptas iure repellendus unde eveniet accusamus ex.</p>
</div>
<div id="tab3">
<h2>Heading 3</h2>
<p>Atque ratione soluta laboriosam illo inventore amet ipsum aliquam assumenda harum provident nam accusantium neque debitis obcaecati maxime officia saepe ad ducimus in quam libero vero quasi. Saepe sit nisi?</p>
</div>
</section>
</div>
And some piece of JQuery:
$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
e.preventDefault();
var $this = $(this),
tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabgroup).children('div').hide();
$(target).show();
})
Add some styles to it:
$('.tabgroup > div').hide();
$('.tabgroup > div:first-of-type').show();
$('.tabs a').click(function(e){
e.preventDefault();
var $this = $(this),
tabgroup = '#'+$this.parents('.tabs').data('tabgroup'),
others = $this.closest('li').siblings().children('a'),
target = $this.attr('href');
others.removeClass('active');
$this.addClass('active');
$(tabgroup).children('div').hide();
$(target).show();
})
And you done:) hope this helps.

Check the below code: Added 'display:none' to div2. and Toggle it on menu click.
function myFunction1() {
document.getElementById("div1").style.display = "";
document.getElementById("div2").style.display = "none";
}
function myFunctionone() {
document.getElementById("div1").style.display = "none";
document.getElementById("div2").style.display = "";
}
<div id="div1" class="round1">
<table>
<tr>
<td>
<img src="html5.gif" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="pic_mountain.jpg" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>
<div id="div2" class="round1" style="display:none">
<table>
<tr>
<td>
<img src="pic_mountain.jpg" alt="Mountain1" style="width:128px;height:128px;">
<br>If a browser cannot find an image, it will display the alternate text
</td>
<td>
<img class="up" src="html5.gif" style="width:138px;height:70px;"> </td>
</tr>
</table>
</div>

How to showing expanding text with javascript and css

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>