JohnDotHR JohnDotHR - 6 months ago 23
jQuery Question

Toggle script when other div is clicked

Alright. So I'm using this simple script which toggles divs. You all know how it works, I'm sure.

<div class="side-menu"> <!-- on click na sliku -> otvara div -> fadein -->
<div id="showabout">
<img src="img/info.png" class="hvr-grow" style="cursor: pointer;">
</div>
<br>
<div id="showservices">
<img src="img/list.png" class="hvr-grow" style="cursor: pointer;" >
</div>
<br>
<div id="showportfolio">
<img src="img/briefcase.png" class="hvr-grow" style="cursor: pointer;">
</div>
<br>
<div id="showcontact">
<img src="img/phone-call.png" class="hvr-grow" style="cursor: pointer;">
</div>
</div>

<div class="main">
<div id="about" style="display: none;">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<p> About Us </p>
</div>
</div>
</div>
<div id="services" style="display: none;">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<p> Services </p>
</div>
</div>
</div>
<div id="portfolio" style="display: none;">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<p> Portfolio </p>
</div>
</div>
</div>
<div id="contact" style="display: none;">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<p> Contact </p>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('#showabout').click(function() {
$('#about').fadeToggle("slow");
});
});
</script>
<script>
$(document).ready(function() {
$('#showservices').click(function() {
$('#services').slideToggle("slow");
});
});
</script>
<script>
$(document).ready(function() {
$('#showportfolio').click(function() {
$('#portfolio').fadeToggle("slow");
});
});
</script>
<script>
$(document).ready(function() {
$('#showcontact').click(function() {
$('#contact').slideToggle("slow");
});
});
</script>


So now I've got two questions. The first one is: When you toggle the #about div, it appears, as it should. But then when you click on #showservices it should remove the about div and replace it with the services one, they shouldn't go one across the other.

And the second question is; how can I turn all these into one script? It seems stupid to have 4 's when I'm sure they all can fit in one cleaner script.

Answer

I think you can simplify things by storing some context in data attributes. I also took a little CSS from the in-line to make it a little easier to read. I think this is the effect you are looking to achieve (a cross fade between result panes), but if not let me know and I'll see what I can do to help.

$(function(){

  $(".side-menu .slide-menu-item").on("click", function(){
    var $target = $("#" + $(this).attr("data-target"));
    $target.siblings().fadeOut();
    $target.fadeIn();
  });

});
.slide-menu-item { cursor: pointer; margin-bottom: 1em; }
.main { position: relative; }
.main .panel { position: absolute; display: none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="side-menu"> <!-- on click na sliku -> otvara div -> fadein -->
  <div id="showabout" class="slide-menu-item" data-target="about">
    <img src="img/info.png" class="hvr-grow">
  </div>
  <div id="showservices" class="slide-menu-item" data-target="services">
    <img src="img/list.png" class="hvr-grow">
  </div>
  <div id="showportfolio" class="slide-menu-item" data-target="portfolio">
    <img src="img/briefcase.png" class="hvr-grow">
  </div>
  <div id="showcontact" class="slide-menu-item" data-target="contact">
    <img src="img/phone-call.png" class="hvr-grow">
  </div>
</div>

<div class="main">
    <div id="about" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> About Us </p>
            </div>
        </div>
    </div>
    <div id="services" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> Services </p>
            </div>
        </div>
    </div>
    <div id="portfolio" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> Portfolio </p>
            </div>
        </div>
    </div>
    <div id="contact" class="panel">
        <div class="row">
            <div class="col-xs-12 col-sm-6 col-md-8">
                <p> Contact </p>
            </div>
        </div>
    </div>
</div>