Button to Clear text with Bootstrap - javascript

I'm using Bootstrap to generate tabs. I have a reset button which clears the content from the tab but it doesn't work. Here's my code:
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<?php echo "Some text" ?>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.nav-tabContent.nav-home.value=''">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>
</div>
So my "Clear" button should clear the text, "Some text". How would go about in clearing the text with the button??
tks


maybe you need to add some id or class at your "Some Text" php, like
<span id="abc"><?php echo "Some Text"; ?></span>
So you can access it with jquery or javascript like this onclick button
onclick="somefunction()"
And
somefunction() {
$('#abc').html("");
}


You could try wrap <?php echo 'some text'; ?> in for example a <p> tag and add this code to the onlick event in button tag
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
Try this live example having many tabs
const navItems = document.querySelectorAll('.nav-item')
const tabPanes = document.querySelectorAll('.tab-pane');
navItems.forEach(item => item.addEventListener('click', clear));
function clear(event) {
event.preventDefault();
const element = event.target;
const paneId = element.getAttribute('href').split('#')[1];
const pane = document.querySelector(`#${paneId}`);
clearNavItems();
clearPanes();
element.classList.add('active');
pane.classList.add('show');
pane.classList.add('active');
}
function clearNavItems() {
navItems.forEach(item => item.classList.remove('active'));
}
function clearPanes() {
tabPanes.forEach(pane => {
pane.classList.remove('active');
pane.classList.remove('show');
});
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<nav>
<div class="nav nav-tabs" id="nav-tab" role="tablist">
<a class="nav-item nav-link active" id="nav-home-tab" data-toggle="tab" href="#nav-home" role="tab" aria-controls="nav-home" aria-selected="true">Home</a>
<a class="nav-item nav-link" id="nav-profile-tab" data-toggle="tab" href="#nav-profile" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</a>
<a class="nav-item nav-link" id="nav-contact-tab" data-toggle="tab" href="#nav-contact" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</a>
</div>
</nav>
<div class="tab-content" id="nav-tabContent">
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus qui, pariatur ipsum ducimus numquam porro optio adipisci, nemo, cupiditate unde mollitia accusantium, suscipit. Explicabo, officiis corrupti praesentium. Quis, unde, fugit.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto.</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
<div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsa mollitia unde perspiciatis?</p>
<button type="button" class="btn btn-primary" value="Reset" onclick="this.parentNode.querySelector('p').innerHTML = '';">Clear</button>
</div>
</div>
</div>


Going by what you currently have, I would make the following edit:
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<p id="nav-home-text"><?php echo "Some text" ?></p>
<br><br>
<button type="button" class="btn btn-primary" value="Reset" onclick="document.getElementById('nav-home-text').innerHTML=''">Clear</button>
</div>
Targeting to clear nav-home will also clear he button as the button is part of nav-home
Wrap the text in a <p> and give it an id so you could target it from the button using document.getElementById()
You should only target .value for elements that have the value attribute e.g <input>.


I think you need to add some jquery to remove the text.
first you need to place the text inside the span with the id content and clear the text inside the content using jquery.
you can use this.
<div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">
<span id="content"><?php echo "Some text" ?></span>
<br><br>
<button class="btn btn-primary" onclick="$('#content').text('');">Clear</button>
</div>

Related

How to create vertical tab with js as paragraph?

I want to create something like this menu using bootstrap. But I can't do this. I am creating but there are lots of problem. Is there anyone who can solve this prob? Must remember I am doing with bootstrap 4. Here is the demo.
<!doctype html>
<html lang="en">
<head>
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
</head>
<body>
<div class="nav flex-column nav-pills" id="v-pills-tab" role="tablist" aria-orientation="vertical">
<a class="nav-link active" id="v-pills-home-tab" data-toggle="pill" href="#v-pills-home" role="tab"
aria-controls="v-pills-home" aria-selected="true">Home</a>
<div class="tab-pane fade show active" id="v-pills-home" role="tabpanel" aria-labelledby="v-pills-home-tab">
<strong>Home tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
<a class="nav-link" id="v-pills-profile-tab" data-toggle="pill" href="#v-pills-profile" role="tab"
aria-controls="v-pills-profile" aria-selected="false">Profile</a>
<div class="tab-pane fade" id="v-pills-profile" role="tabpanel" aria-labelledby="v-pills-profile-tab"><strong>
Profile tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
<a class="nav-link" id="v-pills-messages-tab" data-toggle="pill" href="#v-pills-messages" role="tab"
aria-controls="v-pills-messages" aria-selected="false">Messages</a>
<div class="tab-pane fade" id="v-pills-messages" role="tabpanel" aria-labelledby="v-pills-messages-tab">
<strong>Message tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
<a class="nav-link" id="v-pills-settings-tab" data-toggle="pill" href="#v-pills-settings" role="tab"
aria-controls="v-pills-settings" aria-selected="false">Settings</a>
<div class="tab-pane fade" id="v-pills-settings" role="tabpanel" aria-labelledby="v-pills-settings-tab">
<strong>Setting tab </strong>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam aspernatur corporis,
culpa delectus deleniti dolorem exercitationem facilis hic, incidunt nemo nulla officia qui repudiandae,
sed voluptates. Commodi maxime possimus sed!
</div>
</div>
</body>
</html>
In this menu. Need a header and under the header need to show details with same background color.
Thank you

Try with Bootstrap's Collapse - Accordion:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Theory & Concepts
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>Images Files Formats</li>
<li>Pixels vs Vector</li>
<li>...</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Adobe Illustrator CC
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>Point1</li>
<li>Point2</li>
<li>PointN</li>
</ul>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
Outsourcing/Freelancing
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
<ul>
<li>Point1</li>
<li>Point2</li>
<li>PointN</li>
</ul>
</div>
</div>
</div>
</div>
For more information: http://getbootstrap.com/docs/4.1/components/collapse/

You are looking for collapse in bootstrap, check this tutorial here
Here is a sample code for your problem
<html>
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
<body>
<div class="accordion" id="accordionExample">
<div class="card">
<div class="card-header" id="headingOne">
<h5 class="mb-0">
<button class="btn btn-link" type="button" data-toggle="collapse" data-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
Theory & Concepts
</button>
</h5>
</div>
<div id="collapseOne" class="collapse show" aria-labelledby="headingOne" data-parent="#accordionExample">
<div class="card-body">
<li>Image file formats</li>
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingTwo">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
Adobe Illustrator CC
</button>
</h5>
</div>
<div id="collapseTwo" class="collapse" aria-labelledby="headingTwo" data-parent="#accordionExample">
<div class="card-body">
//For Adobe illustrator CC
</div>
</div>
</div>
<div class="card">
<div class="card-header" id="headingThree">
<h5 class="mb-0">
<button class="btn btn-link collapsed" type="button" data-toggle="collapse" data-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
OutSourcing/freelancing
</button>
</h5>
</div>
<div id="collapseThree" class="collapse" aria-labelledby="headingThree" data-parent="#accordionExample">
<div class="card-body">
//For outsourcing and freelancing
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>

Add class other element based on bootstrap .carousel-indicators li has class active

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

Change image when is area expanded

My lack of knowledge brings me here. I found finally way how to swap images.
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
$this.data('alt-src', $this.attr('src'));
$this.attr('src', newSource);
};
$(function () {
$('img').click(sourceSwap);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<html>
<body>
<ul class="heads nav nav-tabs" role="tablist">
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz kis" role="tab" data-toggle="tab" href="#collapseKisela" aria-expanded="false" aria-controls="#collapseKisela" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="img/profile/Kisela_t.jpg" src="img/profile/Kisela_b.jpg" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz kraus" role="tab" data-toggle="tab" href="#collapseKrausz" aria-expanded="false" aria-controls="#collapseKrausz" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="img/profile/Krausz_t.jpg" src="img/profile/Krausz_b.jpg" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz" role="tab" data-toggle="tab" href="#collapseJancusko" aria-expanded="false" aria-controls="#collapseJancusko" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="img/profile/Jancusko_t.jpg" src="img/profile/Jancusko_b.jpg" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz" role="tab" data-toggle="tab" href="#collapseBerka" aria-expanded="false" aria-controls="#collapseKisela" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="img/profile/Berka_t.jpg" src="img/profile/Berka_b.jpg" name="" role="presentation" class="active img-responsive" alt="">
</div>
</a>
</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane fade" id="collapseBerka">
<div class="hlavy">
<h4>René Krausz</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque voluptates maiores magnam expedita inventore eaque alias mollitia voluptate corporis harum ut quod quaerat dolorem, illo fugit soluta impedit, maxime.</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseKrausz">
<div class="hlavy">
<h4>René Krausz</h4>
<h5>CEO</h5>
<p>Some text herer</p>
<p>Text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseJancusko">
<div class="hlavy">
<h4>Lukáš Jancusko</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Changing text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseGrega">
<div class="hlavy">
<h4>Tomáš Grega</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Another text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseKisela">
<div class="hlavy">
<h4>Juraj Kisela</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>TEXT</p>
</div>
</div>
</body>
</html>
But I want to change image back, after I click to another image. Just to have only one changed image in a list.
I'm really stuck, What can I do?

Ok, I have this sorted out for you now.
Firstly you need to fix your html, there are some tags that are unclosed
Next for each image, you would add another data element
data-src which will hold the original source of the image.
When this tab becomes active then you add a class "active" to the image
When you click a new image, you would then change the src to the data-src attribute on all active images(which would only be the previously active element).
Then you would add the active class to the one you selected and change the source.
Hope this sorts it out for you. Good luck
<html>
<body>
<ul class="heads nav nav-tabs" role="tablist">
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz kis" role="tab" data-toggle="tab" href="#collapseKisela" aria-expanded="false" aria-controls="#collapseKisela" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz kraus" role="tab" data-toggle="tab" href="#collapseKrausz" aria-expanded="false" aria-controls="#collapseKrausz" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" class="xyz img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz" role="tab" data-toggle="tab" href="#collapseJancusko" aria-expanded="false" aria-controls="#collapseJancusko" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" name="" role="presentation" class="active img-responsive" alt="">
</div>
</div>
</a>
</li>
<li class="col-md-3 col-sm-3 col-xs-3">
<a class="odkaz" role="tab" data-toggle="tab" href="#collapseBerka" aria-expanded="false" aria-controls="#collapseKisela" data-parent='#accordeon'>
<div class="team-members">
<div class="team-avatar core-foto">
<img data-alt-src="https://placehold.it/350x160" data-src="https://placehold.it/350x150" src="https://placehold.it/350x150" name="" role="presentation" class="active img-responsive" alt="">
</div>
</div>
</a>
</li>
</ul>
<div class="row tab-content">
<div role="tabpanel" class="tab-pane fade" id="collapseBerka">
<div class="hlavy">
<h4>René Krausz</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vero atque voluptates maiores magnam expedita inventore eaque alias mollitia voluptate corporis harum ut quod quaerat dolorem, illo fugit soluta impedit, maxime.</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseKrausz">
<div class="hlavy">
<h4>René Krausz</h4>
<h5>CEO</h5>
<p>Some text herer</p>
<p>Text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseJancusko">
<div class="hlavy">
<h4>Lukáš Jancusko</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Changing text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseGrega">
<div class="hlavy">
<h4>Tomáš Grega</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>Another text</p>
</div>
</div>
<div role="tabpanel" class="tab-pane fade" id="collapseKisela">
<div class="hlavy">
<h4>Juraj Kisela</h4>
<h5>CEO</h5>
<p>Some text here</p>
<p>TEXT</p>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script>
var sourceSwap = function () {
var $this = $(this);
var newSource = $this.data('alt-src');
var activeItem = $('.heads img.active');
var activeSource = activeItem.data('src');
activeItem.attr('src', activeSource).removeClass('active');
$this.addClass('active');
$this.attr('src', newSource);
};
$(function () {
$('.heads').on('click', 'img', sourceSwap);
});
</script>
</body>
</html>

like this?
$(function () {
$('img').each(function(){
this.dataset['original-src'] = this.src
}).click(function () {
var current = this;
$('img').each(function(){
this.src = this.dataset[this === current? "alt-src": "original-src"];
})
});
});
or more that
$(function () {
var current;
$('img').each(function(){
this.dataset['original-src'] = this.src
}).click(function(){
if(current){
current.src = current.dataset["original-src"];
}
if(current = current === this? null: this){
current.src = current.dataset["alt-src"];
}
});
});

jQuery this and toggle 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

Bootstrap 3 - Nested collapse with icon

I am trying to create a nested collapse with icon, but when I click on a child inside main collapse, the parent icon is changed. How can I prevent this?
JSFiddle
HTML:
<div class="aside-archives">
<h3>Archive</h3>
<div class="aside-archive">
<div data-toggle="collapse" data-target="#2014">
<i class="fa fa-caret-right"></i>2014
</div>
<div id="2014" class="collapse">
<ul>
<li data-toggle="collapse" data-target="#january-2014"><span class="fa fa-caret-right"></span> January (3)
<div class="collapse-inner" id="january-2014">
Lorem ipsum dolor.
Optio, voluptatem, earum!
Officiis, sint, possimus.
</div>
</li>
<li>February (1)</li>
<li>March</li>
<li>April</li>
<li>May</li>
<li>June</li>
<li>July</li>
<li>August</li>
<li>September</li>
<li>October</li>
<li>November</li>
<li>December</li>
</ul>
</div>
</div>
</div>
JQUERY:
var collapse = $('.collapse');
collapse.on('hide.bs.collapse show.bs.collapse', function (e) {
e.stopPropagation();
var $this = $(this),
parent = $this.parent(),
icon = parent.find('i');
icon.toggleClass('fa-caret-right fa-caret-down');
});

Categories

Resources