3

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

1

4 Answers 4

3

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

});
2

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>

0

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>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.