As you see on the default text without clicking anywhere the "Tap on the symbols if you want to know more text" is placed below the other text with a <br> in the html.
When you click somewhere on the page (not on any text) it should display the default text. but the current javascript code displays the text without the <br> so it's all together.
Is there some smart way to place the text as default even when i want to go back to the default text. The Tap on the symbol text should only be visible in the default text so it should not be displayed when you press any of the other "buttons".
$(document).ready(function() {
// Put all the images in a JavaScript array
var $imgs = $(".section-link");
// If you store your content in an array of objects, you can do this without creating
// more than one display div. You'll just get the content from the object in the
// array that has the same index as the image (within a different array)
var data = [{
title: "Fair trade",
text: "The Process from start is fair to all who are included in making our clothes."
},
{
title: "Toxicfree",
text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
},
{
title: "Fair Trade",
text: "The Process from start is fair to all who are included in making our clothes."
},
{
title: "Toxicfree",
text: "Our clothes does not contain any toxic materials and are made under toxicfree conditions."
},
{
title: "Quality",
text: "Our clothes have sustainable and high quality."
},
{
title: "Organic",
text: "All the materials and processes are fully organic and friendly to our planet."
},
{
title: "Vegan",
text: "We care about the animals, all clothes are crueltyfree and vegan."
},
];
// Get reference to the output area
var $outputDiv = $(".section-display");
var defaulttext = $outputDiv.find(".text1").text()
var defaultTitle = $outputDiv.find(".title1").text();
// Set a click event handler for each of the images
$imgs.on("click", function() {
// Find the child elements within the output div that need updating and
// extract the content from the array of objects that correspond
// to the index of the image that was clicked.
$This = $(this)
$(".title1", $outputDiv).animate({
opacity: 0
}, function() {
$(".title1", $outputDiv).text(data[$This.index() - 1].title)
.animate({
opacity: 1
});
});
$(".text1", $outputDiv).animate({
opacity: 0
}, function() {
$(".text1", $outputDiv).text(data[$This.index() - 1].text)
.animate({
opacity: 1
});
})
});
$(document).on("click", function(e) {
if ($(e.target).closest('.section-display').length != 1 && $(e.target).closest(".section-link").length != 1) {
$(".title1", $outputDiv).animate({
opacity: 0
}, function() {
$(".title1", $outputDiv).text(defaultTitle)
.animate({
opacity: 1
});
});
$(".text1", $outputDiv).animate({
opacity: 0
}, function() {
$(".text1", $outputDiv).text(defaulttext)
.animate({
opacity: 1
});
})
}
})
});.section-link {
width: 50px;
height: 50px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div class="section-link small-solid-circle-p4 fair-d">
<h2>
<nobr>FAIR-TRADE</nobr>
</h2>
</div>
<div class="section-link small-solid-circle-p4 toxic-d">
<h2>TOXICFREE</h2>
</div>
<div class="section-link small-solid-circle-p4 quality-d">
<h2>QUALITY</h2>
</div>
<div class="section-link small-solid-circle-p4 organic-d">
<h2>ORGANIC</h2>
</div>
<div class="section-link small-solid-circle-p4 vegan-d">
<h2>VEGAN</h2>
</div>
<div class="section-display active info-p4">
<h2 class="title1">Conscious fashion</h2>
<h2 class="text1">ut tristique lorem purus id mauris. Maecenas placerat a nibh sed imperdiet. Curabitur eget nulla rutrum, mollis sapien quis, finibus diam. Aenean congue, sapien et tempus vestibulum, dolor elit molestie lorem, in consectetur arcu leo ac elit. Vestibulum
commodo nisi sit amet mi dictum fringilla. Proin rutrum consectetur velit sit amet auctor. In neque nisl, iaculis pharetra varius non, sodales non magna..<br>
<br> Tap on the symbols if you want to know more.</h2>
</div>
