Click Function issue. Toggle between two div's with same function

Question

I have been trying to create a separate function that can be used to call the click element and show element directly without making it to create again and again by calling the function directly. So I just got stuck when click on the other second div the first div not getting hidden. So kindly help me with this. I tried this

jQuery(document).ready(function(){
    showNav(".clickElement",".dropElement");    
    showNav(".AnotherElement",".AnotherDropElement");    
    showNav(".thirdElement",".thirdDropElement");    
});

function showNav(clickElement,showElement)
{
    jQuery(showElement).removeClass("dropdownElement");
    jQuery(showElement).hide();
    jQuery(clickElement).each(function(){
        jQuery(this).click(function(e){
            jQuery(this).toggleClass("active");
            jQuery(showElement).toggle();
            jQuery(showElement).toggleClass("dropdownElement");
            e.stopPropagation();
        });
        jQuery(document).on("click",".dropdownElement",function(e){
            e.stopPropagation();
        });
        jQuery(document).click(function(e) {
            if(jQuery(e.target).hasClass(clickElement)||jQuery(e.target).hasClass(showElement))
            {
                console.log(clickElement);
            }
            else
            {   console.log(clickElement);      
                jQuery(clickElement).removeClass("active");         
                jQuery(document).find(".dropdownElement").hide();
                jQuery(document).find(".dropdownElement").removeClass("dropdownElement");
            }
        }); 

    });
}

<ul>
    <li>
        <div class="clickElement">Click Function</div>
        <div class="dropElement" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </li>
    <li>
        <div class="AnotherElement">Click Function</div>
        <div class="AnotherDropElement" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </li>
    <li>
        <div class="thirdElement">Click Function</div>
        <div class="thirdDropElement" style="display: none">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
    </li>
</ul>

ul li { 
    display: inline-block;
    width: 30%;    
    vertical-align: top;
}

Example Snippet

Answer 1

You can use easily within two jquery steps with same HTML, you mentioned above

Here is the Jquery code

$('ul li div:first-child').click(function() {
    $('ul li div:first-child').next('div').hide();
    $(this).next('div').show();
});

jsfiddle:

1. link1 - (without body event bubbling)
2. link2 - (with body event bubbling)

Answer 2

you do not need these many functions, just a simple click event is needed

As far as HTML is concerned you just have to add the class showDiv instead of three separate classes like dropElement,AnotherDropElement,thirdDropElement

This will also hide the divs if you click outside the target

$('.showDiv').hide();
$(function(){

    $('ul li').click(function(){
        var thisDiv = $(this).find('.showDiv');
        thisDiv.show();
        $('ul li').find('.showDiv').not(thisDiv).hide();
    });
    $(document).click(function(){
        if(event.target.nodeName == 'HTML'){
          $('ul li').find('.showDiv').hide();
        }
    });
});

Check out the Fiddle Link

Answer 3

Hope this will help you with your issue.

http://jsfiddle.net/18yao91v/254/

$("#img1").on('click', function() {
   $("#div1").fadeIn();
   $("#div2,#div3,#div4").fadeOut();
});
$("#img2").on('click', function() {
   $("#div2").fadeIn();
   $("#div1,#div3,#div4").fadeOut();
});
$("#img3").on('click', function() {
   $("#div3").fadeIn();
   $("#div1,#div2,#div4").fadeOut();
});
$("#img4").on('click', function() {
   $("#div4").fadeIn();
   $("#div1,#div2,#div3").fadeOut();
});