Develop Reference

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

I am trying to add a class to make a child .modal-container visible when clicking on the parent, which works, but then the second part of the code doesn't seem to work. e.g. when I click on the top right corner X sign .close-modal the modal doesn't disappear.
This is how the code looks like:
$(".animals-images").on('click', function() {
$(this).find(".modal-container").addClass("show");
});
$(".close-modal").on('click', function() {
$(this).parent(".modal-right").parent(".modal").parent(".modal-container").removeClass("show");
});
This is how the .show class style on CSS looks like:
.modal-container.show {
opacity: 1;
pointer-events: auto;
transition: all 0.4s ease;
}
If on the last part of the jQuery code I put CSS ("opacity", "0"); instead of removeClass it works (but only once obviously). So I don't quite understand what is wrong here.
I wanted to do this in vanilla JavaScript, so if you have any idea how to do this it would be so much appreciated!
HTML:
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim!
Aut odio nobis vitae tenetur assumenda sit enim quo explicabo!
Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>
Consider that this is repeated 10 times (for 10 different images/modals), I am trying to find a way to do this with a few lines of code instead of selecting 10 individual times

Update (based on OP comment)
thanks for the answer #dippas , is there any way that I can make this code functional for many other images?
You've got to loop through each button then toggling class show on each event (e.currentTarget)
const buttonsOpen = document.querySelectorAll('.click-me'),
buttonsClose = document.querySelectorAll('.close-modal')
buttonsOpen.forEach(el => el.addEventListener('click', e => e.currentTarget.parentElement.nextElementSibling.classList.add('show')))
buttonsClose.forEach(el => el.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show')))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 1
</p>
</div>
</div>
</div>
</div>
<hr />
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Modal 2
</p>
</div>
</div>
</div>
</div>
Here is a simple solution using vanilla JS
const buttonOpen = document.querySelector('.click-me'),
buttonClose = document.querySelector('.close-modal'),
modal = document.querySelector('.modal-container')
buttonOpen.addEventListener('click', () => modal.classList.add('show'))
//this
//buttonClose.addEventListener('click', () => modal.classList.remove('show'))
//or this
buttonClose.addEventListener('click', e => e.currentTarget.closest('.modal-container').classList.remove('show'))
.modal-container {
display: none
}
.modal-container.show {
display: block
}
<div class="animals-images">
<img src="./bianca.jpg" class="animals-pictures" alt="">
<div class="button-container">
<button class="click-me">Click Me!</button>
</div>
<div class="modal-container">
<div class="modal">
<div class="modal-left" style="background-image: url(./piggy.jpg);">
</div>
<div class="modal-right">
<h2>Bianca</h2>
<button class="close-modal">X</button>
<p class="modal-paragraph">
Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto, enim! Aut odio nobis vitae tenetur assumenda sit enim quo explicabo! Unde quaerat nisi ea minus laudantium voluptatibus ipsum qui quis!
</p>
</div>
</div>
</div>
</div>

Disable left and right controls when first and last time is active

How can i disable left control when first item is active and same goes to right if last item is active then disable right control
i would appreciate if i get any suggestions, is there any alternative for this
Thanks
JsFiddle Here
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="carousel slide" data-ride="carousel" id="quote-carousel">
<!-- Carousel Slides / Quotes -->
<div class="carousel-inner text-center">
<!-- Quote 1 -->
<div class="item active">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 2 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
<!-- Quote 3 -->
<div class="item">
<blockquote>
<div class="row">
<div class="col-sm-8 col-sm-offset-2">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit,ore et dolore magna aliqua. Ut eni !</p>
</div>
</div>
</blockquote>
</div>
</div>
<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
<li data-target="#quote-carousel" data-slide-to="0" class="active"><img class="img-responsive " src="https://s3.amazonaws.com/uifaces/faces/twitter/mantia/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="1"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/adhamdannaway/128.jpg" alt="">
</li>
<li data-target="#quote-carousel" data-slide-to="2"><img class="img-responsive" src="https://s3.amazonaws.com/uifaces/faces/twitter/brad_frost/128.jpg" alt="">
</li>
</ol>
<!-- Carousel Buttons Next/Prev -->
<a data-slide="prev" href="#quote-carousel" class="left carousel-control"><i class="fa fa-chevron-left"></i></a>
<a data-slide="next" href="#quote-carousel" class="right carousel-control"><i class="fa fa-chevron-right"></i></a>
</div>
</div>
</div>
</div>

You can do it using slid.bs.carousel bootstrap event
1. Show or Hide controls
jQuery("#quote-carousel").on('slid.bs.carousel', function () {
//Show or Hide left indicator
if($(this).find('li:first-child').hasClass('active')){
$(this).find('.left').hide();
}else{
$(this).find('.left').show();
}
//Show or Hide right indicator
if($(this).find('li:last').hasClass('active')){
$(this).find('.right').hide();
}else{
$(this).find('.right').show();
}
}).trigger('slid.bs.carousel');
2. For Disabling the controls
You can disable it using CSS pointer-events.
See here for complete code, https://jsfiddle.net/n4v63g3L/6/

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 make a toggle button in javascript to change the backgrounds of divs, text of a <p> tag and switch between two groups of divs

So I've been working on this project for a few days where I would like to toggle several elements of a page to hide and make others appear. This happens with the use of the button you see before you. The button successfully changes the page to the other but I am unable to bring it back to the other setting. I change the backgrounds with the use of data- values in the divs. The problem is I have a limited understanding of javascript and am sure that my code is probably riddled with problems. So in conclusion I would like the button to be able to toggle between both states of the page. I am also willing to use JQuery which there is some of already in my code. As a last note I would also like to later add css transitions later if that would change anyones answer or if anyone could provide any advice on that before i do it that would be great.
This is a sample of the HTML of one of the divs. This particular one contains the button that toggles and the divs that I want to switch out
<div class="container-projects bg-topics color-div" data-color="#383838" data-color1="#A2AB58">
<div class="container">
<h1 id="projects" class="text-center">TOPICS</h1>
<br />
<br />
<div class="row" id="goodPageTopics">
<div class="col-md-12 text-center">
<ul class="list-unstyled text-center">
<li class="filter btn btn-primary" data-filter="all">ALL</li>
<li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
<li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
<li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
</ul>
</div>
<div class="mix branding col-md-3" id="goodTopic1">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project1.png" />
<a href="#project-1">
<div class="img-info bg-primary">Click to see more info</div>
</a>
</div>
</div>
<div class="mix development col-md-3" id="goodTopic2">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project2.png" />
<a href="#project-2">
<div class="img-info bg-success">Click to see more info</div>
</a>
</div>
</div>
<div class="mix design col-md-3" id="goodTopic3">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project3.png" />
<a href="#project-3">
<div class="img-info bg-warning">Click to see more info</div>
</a>
</div>
</div>
<div class="mix branding col-md-3" id="goodTopic4">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project4.png" />
<a href="#project-4">
<div class="img-info bg-danger">Click to see more info</div>
</a>
</div>
</div>
<div class="mix design col-md-3" id="goodTopic5">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project5.png" />
<a href="#project-5">
<div class="img-info bg-info">Click to see more info</div>
</a>
</div>
</div>
<div class="mix seo col-md-3" id="goodTopic6">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project6.png" />
<a href="#project-6">
<div class="img-info bg-primary">Click to see more info</div>
</a>
</div>
</div>
<div class="mix design col-md-3" id="goodTopic7">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project7.png" />
<a href="#project-7">
<div class="img-info bg-success">Click to see more info</div>
</a>
</div>
</div>
<div class="mix seo col-md-3" id="goodTopic8">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project8.png" />
<a href="#project-8">
<div class="img-info bg-warning">Click to see more info</div>
</a>
</div>
</div>
</div>
</div>
<div class="clearfix hidden-xs" style="width:100%; height:50px;"></div>
<div class="btn-switchbutton-container">
<button type="button" class="btn-switchbutton color-div" id="change-page" data-color="#9a0707" data-color1="">Change Veiw</button>
</div>
</div>
This is a sample of a div that replaces the others but is hidden by default
<div class="mix development col-md-3" id="badTopic1">
<div class="img-wrapper">
<img class="img-responsive" src="images/backfiletest.png" />
<a href="#project-2">
<div class="img-info bg-success">Click to see more info</div>
</a>
</div>
</div>
This is the code before I started messing with it but sadly it is unable to toggle.
$('body').on('click', '#change-page', function () {
$('.color-div').each(function () {
$(this).css('background-color', $(this).data('color'));
});
// Changes the topics
$('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').each(function () {
$('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').show();
$("#goodTopic1").replaceWith($("#badTopic1"));
$("#goodTopic2").replaceWith($("#badTopic2"));
$("#goodTopic3").replaceWith($("#badTopic3"));
$("#goodTopic4").replaceWith($("#badTopic4"));
$("#goodTopic5").replaceWith($("#badTopic5"));
$("#goodTopic6").replaceWith($("#badTopic6"));
$("#goodTopic7").replaceWith($("#badTopic7"));
$("#goodTopic8").replaceWith($("#badTopic8"));
});
// Changes the about the page text
$('.change-text').each(function () {
document.body.innerHTML = document.body.innerHTML.replace('Hello and welcome to (insert name here). Here you are able to see unbiased opinions on the current several current happenings of the world. There is a collection of eight good and bad events that have occurred in our recent history and we would like to share the correct information on the matters.',
'Lorem ipsum dolor sit amet, eu sed duis harum. Ex eam congue ponderum electram, nec elit graecis eu, error dolore mandamus nec at. At ullum facilisis eum. In sea consequat incorrupte, viris facilis ad vel. Eos no diceret recusabo, mei et soleat postulant philosophia, cibo libris omnium an mea.');
});
});
This is the new code that I'm sure there is an correct and much simplier way of doing
$('body').on('click', '#change-page', function () {
var element = $("#bg-carousel");
if(element.css('background-color') == "#e54f31") {
$('.color-div').each(function () {
$(this).css('background-color', $(this).data('color1'));
});
// Changes the topics
$('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').each(function () {
$('#goodTopic1, #goodTopic2, #goodTopic3, #goodTopic4, #goodTopic5, #goodTopic6, #goodTopic7, #goodTopic8').hide();
$('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').show();
$("#goodTopic1").replaceWith($("#badTopic1"));
$("#goodTopic2").replaceWith($("#badTopic2"));
$("#goodTopic3").replaceWith($("#badTopic3"));
$("#goodTopic4").replaceWith($("#badTopic4"));
$("#goodTopic5").replaceWith($("#badTopic5"));
$("#goodTopic6").replaceWith($("#badTopic6"));
$("#goodTopic7").replaceWith($("#badTopic7"));
$("#goodTopic8").replaceWith($("#badTopic8"));
});
// Changes the about the page text
$('.change-text').each(function () {
document.body.innerHTML = document.body.innerHTML.replace('"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat');
});
}
else {
$('.color-div').each(function () {
$(this).css('background-color', $(this).data('color'));
});
// Changes the topics
$('#goodTopic1, #goodTopic2, #goodTopic3, #goodTopic4, #goodTopic5, #goodTopic6, #goodTopic7, #goodTopic8').each(function () {
$('#badTopic1, #badTopic2, #badTopic3, #badTopic4, #badTopic5, #badTopic6, #badTopic7, #badTopic8').hide();
$('#goodTopic1, #goodTopic2, #goodTopic3, #goodTopic4, #goodTopic5, #goodTopic6, #goodTopic7, #goodTopic8').show();
$("#badTopic1").replaceWith($("#goodTopic1"));
$("#badTopic2").replaceWith($("#goodTopic2"));
$("#badTopic3").replaceWith($("#goodTopic3"));
$("#badTopic4").replaceWith($("#goodTopic4"));
$("#badTopic5").replaceWith($("#goodTopic5"));
$("#badTopic6").replaceWith($("#goodTopic6"));
$("#badTopic7").replaceWith($("#goodTopic7"));
$("#badTopic8").replaceWith($("#goodTopic8"));
});
// Changes the about the page text
$('.change-text').each(function () {
document.body.innerHTML = document.body.innerHTML.replace('Hello and welcome to (insert name here). Here you are able to see unbiased opinions on the current several current happenings of the world. There is a collection of eight good and bad events that have occurred in our recent history and we would like to share the correct information on the matters.',
'Lorem ipsum dolor sit amet, eu sed duis harum. Ex eam congue ponderum electram, nec elit graecis eu, error dolore mandamus nec at. At ullum facilisis eum. In sea consequat incorrupte, viris facilis ad vel. Eos no diceret recusabo, mei et soleat postulant philosophia, cibo libris omnium an mea.');
});
}
});
This is what it looks like before
This is what it looks like afterclick the colors and text change but the divs dont. It keeps the first divs but doesn't hide them and I think it moves the other set of divs into position it just keeps them hidden. The biggest problem is that it doesn't let the user switch back.

There's an easier way, by just adding a couple divs to hold your two views:
...
<li class="filter btn btn-primary" data-filter=".branding">POLITICS</li>
<li class="filter btn btn-primary" data-filter=".design">ETHICS</li>
<li class="filter btn btn-primary" data-filter=".development">MISCALULATIONS</li>
</ul>
</div>
<div id='view1'>
<div class="mix branding col-md-3" id="goodTopic1">
<div class="img-wrapper">
<img class="img-responsive" src="images/projects/project1.png" />
<a href="#project-1"> ...
...
</div>
<div id='view2'>
<div class="mix development col-md-3" id="badTopic1">
<div class="img-wrapper">
<img class="img-responsive" src="images/backfiletest.png" />
<a href="#project-2"> ...
...
</div>
Then, in your JS making view1 disappear and view2 appear would be as simple as
$('view1').css('display','block'); $('view2').css('display','none');
Then, swap them back:
$('view2').css('display','block'); $('view1').css('display','none');
There's no replacing, so nothing is ever lost.

Unable to click anchor link

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.