I Would Like My Jquery Script Of Show/hide To Always Display One Of The Hiddent Conent And Never Display More Then 1 Hiddent Text At Once

I would like this Show/hide script to show the first hidden text on startup and at all times only show max one hidden content. So if im displaying the hidden content of text 3 and

Solution 1:

You can do a simple accordion for this.

$(document).ready(function($) {
    $('#accordion').find('.accordion-toggle').click(function(){

      //Expand or collapse this panel
      $(this).next().slideToggle('fast');

      //Hide the other panels
      $(".accordion-content").not($(this).next()).slideUp('fast');

    });
  });

Here is an example.

Solution 2:

As suggested in another answer, you can use accordion but if you don't want to change your approach you do following,

add sec class to neverseen{1/2/3} div's like

<divid="leftpanel"><divclass="sec neverseen"><h1>First title</h1><ahref="#"id="show"class='active'><imgclass="secondImage"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"width="40"height="40"><imgclass="firstImg"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png"width="40"height="40"></a><pclass='active'>First text</p></div><divclass="sec neverseen1"><h1>Second title</h1><ahref="#"id="show1"><imgclass="secondImage"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"width="40"height="40"><imgclass="firstImg"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png"width="40"height="40"></a><p>Second text</p></div><divclass="sec neverseen2"><h1>Third title</h1><ahref="#"id="show2"><imgclass="secondImage"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"width="40"height="40"><imgclass="firstImg"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png"width="40"height="40"></a><p>Third text</p></div><divclass="sec neverseen3"><h1>Last title</h1><ahref="#"id="show3"><imgclass="secondImage"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-down-01-128.png"width="40"height="40"><imgclass="firstImg"src="https://cdn3.iconfinder.com/data/icons/faticons/32/arrow-up-01-128.png"width="40"height="40"></a><p>Last text</p></div>

Now we don't have to add events for individual sections, we can add it on sec class

$(".sec img").click(function() {
    var isActive = $(this).parent().hasClass('active');
    $('.sec a').removeClass('active');
    $('.sec p').hide('slideUp');
    if(!isActive) {
      $(this).parent().toggleClass("active"); 
      $(this).parent().next("p").slideToggle("slow");
    }

    returnfalse;
});

Add this CSS at the end,

#leftpanelp.active{
  display: block;  
}

Example

What I am doing here is that I am attaching event to all images under sec div.

When someone click on that, I am setting active class on parent div and resetting every other div.