Unable to click anchor link - javascript

I am working on my new website and have a masonry/Pinterest style effect blog board. When you hover over a post it brings up a button which should link through to the blog/single page. Which it will do if you right click and open in a new window but doesn't if you just left click.
i am guessing it is something to do with the javascript I am using to power the masonry style.
The test site is live here: http://zonocreative.co.uk/lee/blog.html
If anyone could help it would be great.
Regards
For reference, here is my html code:
<!DOCTYPE html>
<html>
<head>
<title>Lee Bollu - Creative Designer Leigh-on-Sea, Essex</title>
<link rel="stylesheet" type="text/css" href="css/styles.css">
<link rel="stylesheet" type="text/css" href="css/columns.css">
<link rel="stylesheet" type="text/css" href="css/flexy-menu.css">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<!--Header-->
<div class="nav-wrapper">
<div class="nav-inner">
<img class="logo" src="images/lee-bollu-logo.svg" alt="Lee Bollu Logo">
<img class="social" src="images/facebook.svg" alt="facebook">
<img class="social" src="images/twitter.svg" alt="twitter">
<ul class="flexy-menu">
<li>Work</li>
<li>Blog</li>
</ul>
</div>
</div>
<!--Header-->
<!--Recent Blog Posts-->
<div class="container">
<div class="container-fluid social-wrapper">
<div id="social-container"></div>
<div id="hidden-items">
<!-- start of an item-->
<div class="item panel clearfix social-entry">
<div class="panel-body">
<div class="content-image">
<img height="300" src="images/workitem.jpg">
<div class="social-blog">
<span>
VIEW POST
</span>
</div>
</div>
<div class="doing-intro">
<h4>Post One</h4>
<p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
<h5>Design, Web   |   2nd July 2014</h5>
</div>
</div>
</div>
<!-- end of an item-->
<!-- start of an item-->
<div class="item panel clearfix social-entry">
<div class="panel-body">
<div class="content-image">
<img height="700" src="images/workitem.jpg">
<div class="social-blog">
<span>
VIEW POST
</span>
</div>
</div>
<div class="doing-intro">
<h4>Post One</h4>
<p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
<h5>Design, Web   |   2nd July 2014</h5>
</div>
</div>
</div>
<!-- end of an item-->
<!-- start of an item-->
<div class="item panel clearfix social-entry">
<div class="panel-body">
<div class="content-image">
<img height="200" src="images/workitem.jpg">
<div class="social-blog">
<span>
VIEW POST
</span>
</div>
</div>
<div class="doing-intro">
<h4>Post One</h4>
<p> Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
<h5>Design, Web   |   2nd July 2014</h5>
</div>
</div>
</div>
<!-- end of an item-->
<!-- start of an item-->
<div class="item panel clearfix social-entry">
<div class="panel-body">
<div class="content-image">
<img height="200" src="images/workitem.jpg">
<div class="social-blog">
<span>
VIEW POST
</span>
</div>
</div>
<div class="doing-intro">
<h4>Post One</h4>
<p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
<h5>Design, Web   |   2nd July 2014</h5>
</div>
</div>
</div>
<!-- end of an item-->
<!-- start of an item-->
<div class="item panel clearfix social-entry">
<div class="panel-body">
<div class="content-image">
<img height="180" src="images/workitem.jpg">
<div class="social-blog">
<span>
VIEW POST
</span>
</div>
</div>
<div class="doing-intro">
<h4>Post One</h4>
<p>Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed Mus molorpor sam, nustintende eum quo blant vellore, quibus maximodi offic tet, ad que et excepudae sed</p>
<h5>Design, Web   |   2nd July 2014</h5>
</div>
</div>
</div>
<!-- end of an item-->
</div>
</div>
</div>
<!--Contact Info-->
<div class="lightgrey-wrapper">
<div class="container">
<div class="contact-wrapper">
<div class="contact-option">
<img class="contact-image" src="images/phone.svg" alt="Lee Bollu Creative Designer Contact">
<h4>Phone</h4>
<p>07769 338 649</p>
</div>
<div class="contact-option">
<img class="contact-image" src="images/computer.svg" alt="Lee Bollu Creative Designer Computer">
<h4>Email</h4>
<p>hello#leebollu.co.uk</p>
</div>
</div>
</div>
</div>
<!--Contact Info-->
<!--base-->
<div class="base-wrapper">
<div class="container">
<div class="section group">
<div class="col span_12_of_12">
<p>© 2014 Lee Bollu</p>
<img class="base-social" src="images/foot-in.svg" alt="">
<img class="base-social" src="images/foot-drib.svg" alt="">
<img class="base-social" src="images/foot-fb.svg" alt="">
<img class="base-social" src="images/foot-twit.svg" alt="">
</div>
</div>
</div>
<!--base-->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="js/flexy-menu.js"></script>
<script>
$(document).ready(function(){
$(".panel a").click(function(e){
e.preventDefault();
var style = $(this).attr("class");
var menustyle = $(".flexy-menu").attr("class");
if(menustyle.indexOf("light") > -1){
$(".flexy-menu").removeAttr("class").addClass("flexy-menu light").addClass(style);
}
else{
$(".flexy-menu").removeAttr("class").addClass("flexy-menu").addClass(style);
}
});
});
$(document).ready(function(){
$(".flexy-menu").flexymenu({
speed: 400,
type: "horizontal",
align: "left",
indicator: false
});
});
</script>
<script src="https://cdn.jsdelivr.net/isotope/2.0.0/isotope.pkgd.min.js"></script>
<script src="js/blog-feed.js"></script>
</body>
</html>
Lee


You need to remove e.preventDefault(); in $(".panel a").click();
$(document).ready(function(){
$(".panel a").click(function(e){
e.preventDefault();
var style = $(this).attr("class");
var menustyle = $(".flexy-menu").attr("class");
if(menustyle.indexOf("light") > -1){
$(".flexy-menu").removeAttr("class").addClass("flexy-menu light").addClass(style);
}
else{
$(".flexy-menu").removeAttr("class").addClass("flexy-menu").addClass(style);
}
});
});


Here is your problem:
$(document).ready(function(){
$(".panel a").click(function(e){
e.preventDefault();
var style = $(this).attr("class");
var menustyle = $(".flexy-menu").attr("class");
if(menustyle.indexOf("light") > -1){
$(".flexy-menu").removeAttr("class").addClass("flexy-menu light").addClass(style);
}
else{
$(".flexy-menu").removeAttr("class").addClass("flexy-menu").addClass(style);
}
});
});
This is capturing ALL links within ".panel a" and preventing the default behavior.

Related

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

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>

Cycle jQuery slider plugin not sliding properly

I'm using the Cycle JS 2 jQuery plugin but it doesn't seem to be sliding correctly when clicking the "Prev" or "Next" buttons.
Update: I am trying to get it to slide all 4 sections at once, hence that is why 4 sections using col-sm-3 are contained within each .item block.
CodePen: http://codepen.io/gutterboy/pen/MaZyZx
HTML:
<div id="main-slider" class="slider">
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://runnersfeed.com/wp-content/uploads/2011/12/curry.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.newsmax.com/Newsmax/files/44/44b1645b-3804-408d-9c64-f68c8f45bc74.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.interbasket.net/news/wp-content/uploads/Lebron-James-Miami-Heat.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="item row">
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://i.usatoday.net/sports/_photos/2011/07/11/NBA-lockout-allows-players-to-look-overseas-9V7G6NL-x-large.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://static6.businessinsider.com/image/5241a14b6bb3f7c368ab8319/nba-players-might-wear-bizarre-nickname-jerseys-in-2013.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://bingemagazine.com/wp-content/uploads/2014/02/BINGEMagazine-DennisRodman.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
<div class="col-sm-3">
<a href="" class="content-wrap">
<div class="image">
<img src="http://www.gannett-cdn.com/-mm-/ac1394dbdcca6a36cbf486633b129cd813095ac3/r=x404&c=534x401/local/-/media/USATODAY/USATODAY/2012/11/26/usp-nba_-san-antonio-spurs-at-toronto-raptors-4_3.jpg" class="img-responsive" alt="Image" />
</div>
<div class="details">
<h4>Some Title</h4>
<p class="sub-title">
I'm a sub-title
</p>
<div class="text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Illud non continuo, ut aeque incontentae. Honesta oratio, Socratica, Platonis
</div>
<div class="link">
Some Link
</div>
</div>
<!-- Details Ends -->
</a>
</div>
<!-- Col Ends -->
</div>
<!-- Item Ends -->
<div class="control">
Prev |
Next
</div>
</div>
CSS:
.slider {
margin: 20px;
}
.content-wrap {
display: block;
//height: 400px;
text-decoration: none;
}
.image {
height: 175px;
overflow: hidden;
img {
height: 100%;
}
}
.details {
padding: 20px 10px;
background-color: #fff;
color: #000;
h4 {
font-size: 18px;
font-weight: bold;
}
.sub-title {
font-size: 16px;
}
.text {
font-size: 14px;
}
}
.control {
padding-top: 50px;
text-align: center;
}
JS:
$(document).ready(function() {
$('#main-slider').cycle({
paused: true,
autoHeight: 'calc',
slides: '> .item',
fx: 'scrollHorz',
next: '.control .next',
prev: '.control .prev',
sync: true
});
});
What am I doing wrong here?
I have a sneaky suspicion it has something to do with using Bootstrap columns on the items inside the slides, but not sure how to fix it.

jQuery fader for two contents

I want to fade two contents the same time on one page by clicking a teaser:
e.g. click on #teaser2 the contents in #backstage2 and #content2 are fading in the same time.
look at my html
<!-- backstage content is in a separate div -->
<div id="backstage">
<div id="bigpicture1">
<img src="img1.jpg" width="800" height="600" />
</div>
<div id="bigpicture2">
<img src="img2.jpg" width="800" height="600" />
</div>
<div id="bigpicture3">
<img src="img3.jpg" width="800" height="600" />
</div>
</div>
<!-- stage content is also in a separate div -->
<div id="stage">
<div id="content1">
<h2>Loremipsum 1</h2>
<p>Nam liber tempor cum soluta nobis eleifend.mehr ...</p>
</div>
<div id="content2">
<h2>Loremipsum 2</h2>
<p>Nam liber tempor cum soluta nobis eleifend.mehr ...</p>
</div>
<div id="content3">
<h2>Loremipsum 3</h2>
<p>Nam liber tempor cum soluta nobis eleifend.mehr ...</p>
</div>
</div>
<!-- teasers are in a separate div -->
<div id="teaser">
<ul>
<li id="teaser1"><img src="img1_thumb.jpg" alt="" /></li>
<li id="teaser2"><img src="img2_thumb.jpg" alt="" /></li>
<li id="teaser3"><img src="img3_thumb.jpg" alt="" /></li>
</ul>
</div>
I found here "http://www.brightyoursite.com/blog/2010/01/23/nice-jquery-content-slider/" some nice code but works only with one content-DIV...
Hope you understand "german-style" english - thanks for your help
Ottmar

Try
$("#backstage2 , #content2").fadeOut();

Although I didn't use suSlider plugin, I think I got the same results as you are looking for but just using jQuery and jQueryUI:
http://jsfiddle.net/marcosfromero/K9jNP/

try
jQuery('#teaser2').bind('click', function() {
jQuery('#backstage2 , #content2').fadeOut();
});
DEMO

Categories

Resources