如何使用jQuery隐藏和显示div的一部分

Question

I am working on an application where i need to show a portion of a div while i will collapse it,ie i have may information on that div but i can not hide all information while collapsing.Like i am posting a fiddle here

FIIDDLE

So in this example when i will collapse after expanding, these portion will be showing.

Name:Jeet Chatterjee Organization :MSH GROUP Location :Salt Lake Occupation :Software Engineer

This portion only.

Answer 1

Try this Updated fiddle :

HTML:

   <a href="#" class="clickme">Click Me</a>
     <div class="box">

   <p> Name:Jeet Chatterjee 
       Organization :MSH GROUP 
       Location :Salt Lake 
       Occupation :Software Engineer
    </p> 

    <p>
    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.
    </p>
</div>

Script:

    // Hide all the elements in the DOM that have a class of "box"
    $('.box').find('p:last').hide();

    // Make sure all the elements with a class of "clickme" are visible and bound
    // with a click event to toggle the "box" state
    $('.clickme').each(function() {
        $(this).show(0).on('click', function(e) {
            // This is only needed if your using an anchor to target the "box" elements
            e.preventDefault();

            // Find the next "box" element in the DOM
            $(this).next('.box').find('p:last').slideToggle('fast');
        });
    });

Answer 2

You can also use class names to show/hide all of the extra information with a single click, or use an ID to show/hide a specific block of information tied to a specific anchor/click.

For instance, if you wanted the user to click on one link that will expand all of the boxes on the page, then use a class name on the portions that are hidden. Or if you wanted each hidden portion to have a specific link that needed to be clicked, you can put a unique ID on each hidden portion that is tied to a clicking on a specific link.