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

Abhinav · Accepted Answer · 2015-07-21 08:18:06Z

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

edited Jul 21, 2015 at 8:18

answered Jul 21, 2015 at 7:49

Abhinav

8,17812 gold badges51 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Steevan · Accepted Answer · 2015-07-21 07:03:13Z

1

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();
});

answered Jul 21, 2015 at 7:03

Steevan

8265 silver badges8 bronze badges

1 Comment

Sai Deepak Over a year ago

Thanks for the quick response. But i dont want to be static. I wanted to be automatically done.

Sanooj · Accepted Answer · 2015-07-21 09:33:42Z

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:

link1 - (without body event bubbling)
link2 - (with body event bubbling)

answered Jul 21, 2015 at 9:33

Sanooj

2,63716 silver badges20 bronze badges

1 Comment

Sai Deepak Over a year ago

Is there any way that i ca use it as a function because the click element and show element will not be inside the li alone

Collectives™ on Stack Overflow

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

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related