I have problem. When I loading page with vue, I get variables: #{{ value }}. But when page full loaded, variable not visible. How I can fix this? I use bootstrap and all scripts included before: </body>.
My template:
<div class="container padding-bottom-3x mb-1">
<div class="row">
<div class="col-lg-9">
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
>
#{{ value }}
</message>
</ul>
<div class="send-message">
<form action="">
<div class="form-group">
<span class="text-danger">#{{ typing }}</span>
<textarea class="form-control" v-model='message' #keyup.enter='send'></textarea>
</div>
</form>
</div>
<!-- <nav class="pagination">
<div class="column">
<ul class="pages">
<li class="active">1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>...</li>
<li>12</li>
</ul>
</div>
<div class="column text-right hidden-xs-down"><a class="btn btn-outline-secondary btn-sm" href="#">Next <i class="icon-arrow-right"></i></a></div>
</nav> -->
</div>
<div class="col-lg-3">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Deleniti, iure totam ex laborum quidem vel nemo eveniet dolores natus id exercitationem veritatis maiores labore eum nam ab possimus, dolorum architecto!
</div>
</div>
</div>
Vue component:
<template>
<li>
<div class="row">
<div class="col-md-2 padding-right-none">
<div class="avatar-user text-center">
<img :src="user.avatar" alt="">
</div>
</div>
<div class="col-md-10 padding-left-none">
<div class="user-name">
<span>{{ user.name }} <i data-toggle="tooltip" title="Онлайн" class="material-icons online">fiber_manual_record</i> <span class="date float-right">{{ time }}</span></span>
</div>
<div class="message">
<slot></slot>
</div>
</div>
</div>
</li>
</template>
<script>
export default {
props: [
'user',
'time',
],
mounted() {
console.log('Component mounted.')
}
}
Try using v-text directive.
more detail
Example
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
v-text="value"
>
</message>
</ul>
UPDATE-1
You can use v-html directive to update the element's innerHTML. More detail
Example
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
v-html="value"
>
</message>
</ul>
UPDATE-2 (Recommended)
Or use v-cloak directive. That can keep the combined CSS rules on the element until the associated Vue instance finishes compilation.
Example
//Combine CSS rules to v-cloak
[v-cloak] {
display: none;
}
//use it in component
<ul class="messages-list" v-chat-scroll>
<message v-for="value,index in chat.message"
:key=value.index
:user=chat.user[index]
:time=chat.time[index]
v-cloak
>
{{value}}
</message>
</ul>
Click here to learn more about v-cloak at Vue official documentation page
Related
Hello the code below generates a Bootstrap page with some lorem text and a sidebar however when the size of the browser window gets smaller it appears at the bottom of the document not on the side and when on very small resolutions it becomes hidden which is intended how do I make it appear at the side when on medium resolutions?
.sidebar-user-box {
padding: 4px;
margin-bottom: 4px;
font-weight: bold;
cursor: pointer;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BmbxuPwQa2lc/FVzBcNJ7UAyJxM6wuqIj61tLrc4wSX0szH/Ev+nYRRuWlolflfl" crossorigin="anonymous">
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta2/dist/js/bootstrap.bundle.min.js" integrity="sha384-b5kHyXgcpbZJO/tY9Ul7kGkf1S0CWuKcCD38l8YkeH8z8QjE0GmW1gYU5S9FOnJ0" crossorigin="anonymous"></script>
<!-- jQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Page style -->
<link rel="stylesheet" href="CSS/index.css">
<!-- Title -->
<title>Social Media Site</title>
</head>
<body>
<nav class="navbar navbar-dark bg-dark">
<div class="container-fluid">
<a class="navbar-brand" href="#">Social Media Site</a>
<div class="d-flex align-items-center">
</div>
</div>
</nav>
<div class="container-fluid">
<div class="row">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 col-xs-9 pt-3 px-4">
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: blue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: white;">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Fugit ut necessitatibus accusamus temporibus magni recusandae tempore, provident consectetur commodi quas cum? Rerum, beatae sed odit quia nobis itaque possimus illo.</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: blue;"></div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-5 col-sm-4 col-xs-12" style="background-color: darkblue;"></div>
<div class="col-md-4 col-sm-4 col-xs-12" style="background-color: gray;">
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Nihil cupiditate repellendus et iusto voluptatem, reprehenderit laudantium qui a dolore dolorum? Perspiciatis voluptates eaque quas architecto cum earum nemo voluptate
in?
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-12" style="background-color: darkblue;"></div>
</div>
</div>
</main>
<nav class="col-lg-2 col-md-3 d-none d-sm-block d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
</body>
</html>
If you want to hide it on on small, remove the d-sm-block..
<nav class="col-lg-2 col-md-3 d-none d-md-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
If you want to show it on the side on small, change the outer column breakpoints from col-md-* to col-sm-*..
<div class="container-fluid">
<div class="row">
<main role="main" class="col-sm-9 ml-sm-auto col-lg-10 px-4">
<div class="container-fluid">
<div class="row">
...
</div>
</div>
<div class="container-fluid">
<div class="row">
...
</div>
</div>
</main>
<nav class="col-lg-2 col-sm-3 d-none d-sm-block bg-dark sidebar">
<div class="sidebar-sticky">
<ul class="nav flex-column">
<li class="nav-item sidebar-user-box" id="1">
<span id="slider-username">User</span>
</li>
<li class="nav-item sidebar-user-box" id="2">
<span id="slider-username">User (2)</span>
</li>
</ul>
</div>
</nav>
</div>
</div>
https://codeply.com/p/WyZu1eBAfQ
Note: There is no -xs- infix in Bootstrap 4 or Bootstrap 5 so the col-xs-* classes are doing nothing. Also, jQuery is not needed for Bootstrap 5.
$(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.
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...
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"];
}
});
});
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