Search code examples
jqueryshow-hidefadeinfadeout

FadeIn on click and FadeOut other elements

The code below shows a modalhides the others depending on which icon you choose. How do I make the elements fade in and out onClick instead of just appear and disappear?

jQuery...

$j(document).ready(function($) {
  $(".modal").hide();

  $(".close-button").click(function(e) {
    e.preventDefault();
    $(".modal").fadeOut('fast');
  });
});

function showHide(d) {
  var onediv = document.getElementById(d);
  var divs = ['tree-surgery', 'site-clearance', 'stump-grinding', 'hedge-trimming', 'conservation', 'commercial'];
  for (var i = 0; i < divs.length; i++) {
    if (onediv != document.getElementById(divs[i])) {
      document.getElementById(divs[i]).style.display = 'none';
    }
  }
  onediv.style.display = 'block';
}

HTML...

                <!-- modals -->

                <div id="tree-surgery" class="modal">

                </div><!-- end .modal -->
                <div id="site-clearance" class="modal">
                </div><!-- end .modal -->
                <div id="stump-grinding" class="modal">
                </div><!-- end .modal -->
                <div id="hedge-trimming" class="modal">
                </div><!-- end .modal -->
                <div id="conservation" class="modal">
                </div><!-- end .modal -->
                <div id="commercial" class="modal">
                </div><!-- end .modal -->

                <!-- icons -->


                        <a href="javascript:showHide('tree-surgery');">
                        <span>Tree Surgery</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('site-clearance');">
                        <span>Site Clearance</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('stump-grinding');">
                        <span>Stump Grinding</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('hedge-trimming');">
                        <span>Hedge Trimming</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('conservation');">
                        <span>Conservation</span></div>
                        </a>
                    </div>
                    <div class="cell small-12 medium-6 large-4 block">
                        <a href="javascript:showHide('commercial');">
                        <span>Commercial</span></div>
                        </a>
                    </div>

I've also tried adding .show and .hide classes with opacity transition but this didn't work either.

Solution

  • With some quick jQuery we are able to

    1. fadeIn the .modal with the id.
    2. target all modal divs that do not have that id and fadeOut with the help of jquery-ui

    In chat it was determined that you are using $j to avoid jQuery conflicts, this version has the jQuery object modified

    $j = jQuery.noConflict(); 
function showHide(d) {
  $j(`#${d}`).fadeIn("fast"); //show the selected one in case its hidden
  $j(`div.modal:not([id=${d}])`).fadeOut("slow");  //fadeOut the others.
}
    div[id] {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- modals -->

<div id="tree-surgery" class="modal">

</div>
<!-- end .modal -->
<div id="site-clearance" class="modal">
</div>
<!-- end .modal -->
<div id="stump-grinding" class="modal">
</div>
<!-- end .modal -->
<div id="hedge-trimming" class="modal">
</div>
<!-- end .modal -->
<div id="conservation" class="modal">
</div>
<!-- end .modal -->
<div id="commercial" class="modal">
</div>
<!-- end .modal -->

<!-- icons -->
<br />

<a href="javascript:showHide('tree-surgery');">
  <span>Tree Surgery</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('site-clearance');">
    <span>Site Clearance</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('stump-grinding');">
    <span>Stump Grinding</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('hedge-trimming');">
    <span>Hedge Trimming</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('conservation');">
    <span>Conservation</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('commercial');">
    <span>Commercial</span></div>
</a>
</div>

    Standard jQuery

    function showHide(d) {
  $(`#${d}`).fadeIn("fast"); //show the selected one in case its hidden
  $(`div.modal:not([id=${d}])`).fadeOut("slow");  //fadeOut the others.
}
    div[id] {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  display: none;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<!-- modals -->

<div id="tree-surgery" class="modal">

</div>
<!-- end .modal -->
<div id="site-clearance" class="modal">
</div>
<!-- end .modal -->
<div id="stump-grinding" class="modal">
</div>
<!-- end .modal -->
<div id="hedge-trimming" class="modal">
</div>
<!-- end .modal -->
<div id="conservation" class="modal">
</div>
<!-- end .modal -->
<div id="commercial" class="modal">
</div>
<!-- end .modal -->

<!-- icons -->
<br />

<a href="javascript:showHide('tree-surgery');">
  <span>Tree Surgery</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('site-clearance');">
    <span>Site Clearance</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('stump-grinding');">
    <span>Stump Grinding</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('hedge-trimming');">
    <span>Hedge Trimming</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('conservation');">
    <span>Conservation</span></div>
</a>
</div>
<div class="cell small-12 medium-6 large-4 block">
  <a href="javascript:showHide('commercial');">
    <span>Commercial</span></div>
</a>
</div>

    Version 1: clickable divs 

    $(function() {
  $("div.modal").click(function(e) {
    //this is the clicked div
    showHide(this.id);
    $(this).text(this.id);  //make the content of the div it's id for demonstration purposes
  });
});

function showHide(d) {
  var divs = $(`div.modal:not([id=${d}])`).fadeOut("slow");
  //$(`#${d}`).fadeIn("fast"); //incase you want to fade the clicked one back in.
}
    div[id] {
  border: 1px solid black;
  width: 150px;
  height: 150px;
  display: inline-block;
}
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
<div id="tree-surgery" class="modal"></div>
<div id="site-clearance" class="modal"></div>
<div id="stump-grinding" class="modal"></div>
<div id="hedge-trimming" class="modal"></div>
<div id="conservation" class="modal"></div>
<div id="commercial" class="modal"></div>