CODEWITHSUNDEEP
javascriptjqueryhtml
Aniket Singh
Aniket Singh

Reputation: 877

How to hide and show div onclick of link

i have a div that is hidden by default when i click on the link then the div is shown. for e.g

<a href="#expe1" class="fa fa fa-times closer" ></a> //this is the link
<div class="resume" id="expe1"></div> // this div is hidden by default

here is the jquery part

jQuery(document).ready(function($) {
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );

    target.show();
    if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 2000);
    }

});
});

Now i want to hide that div which i showed So i created another link in front of that div

<div class="resume" id="expe1"></div><a href="#expe1">x</a>

and here is jquery code

jQuery(document).ready(function($) {
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );
    target.hide();
    });
});

but this doesn't works as first jquery shown above is processed first then the last one.. is there any better way to hide that div becuase i have many div like this

Upvotes: 3

Views: 30181

Answers (4)

pelume_
pelume_

Reputation: 312

you can do this with jquery

$(document).ready(function(){
$(".test").click(function(){
    $("#showme").show();
   $("#tohide").hide();
});
});

the html code is 

<a href="#" class="test">Say Hi</a>
<div id="showme">Howdy</div>
<div id="tohide">fine</div>

Upvotes: 0

cookies
cookies

Reputation: 333

Please see the sample code below

<span href="#" id="showItem">Show Div</span>
<span href="#" id="hideItem">Hide div</span>
<div id="item">to be covered</div>

    <script type="text/javascript" src="js/jquery-2.2.0.min.js"></script>
    <script type="text/javascript">
        var divToHide = $('div#item');
        var hideBtn = $('span#hideItem');
        var showBtn = $('span#showItem');

        showBtn.click(function () {
            divToHide.show();
        });

        hideBtn.click(function () {
            divToHide.hide();
        });

        $(document).ready(function () {
            //alert();
            divToHide.hide();
        });
    </script>

Upvotes: 0

USER10
USER10

Reputation: 974

Codepen Demo

<a href="#expe1" class="fa fa fa-times closer" >Link1</a>  
<div class="resume" id="expe1">Open Block 1</div>  

<a href="#expe2" class="fa fa fa-times closer" >Link2</a>  
<div class="resume" id="expe2">Open Block 2</div>  

<a href="#expe3" class="fa fa fa-times closer" >Link3</a>  
<div class="resume" id="expe3">Open Block 3</div>

JS:

 $('.resume') .hide()
$('a[href^="#"]').on('click', function(event) {
$('.resume') .hide()
    var target = $(this).attr('href');

    $('.resume'+target).toggle();

});

Upvotes: 3

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

you can use fadeToggle(); or slideToggle();

jQuery(document).ready(function($) {
$('a[href^="#"]').on('click', function(event) {

    var target = $( $(this).attr('href') );
    target.fadeToggle(100);
    /*if( target.length ) {
        event.preventDefault();
        $('html, body').animate({
            scrollTop: target.offset().top
        }, 2000);
    }*/

});
});
.resume{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#expe1" class="fa fa fa-times closer" >Click</a>
<div class="resume" id="expe1">Something Here</div>

Upvotes: 2

Related Questions