CODEWITHSUNDEEP
jquerycsshtml
SHSHSHSHS
SHSHSHSHS

Reputation: 1

Hiding the content of a <div> and showing another <div> with different contents

I have a div with contents of pics

             <div class="1">
               <div class="2">
                 <img src="img/aa.png"></img>

               </div>
               <div class="3">         
                 <img src="img/bb.png"></img>

               </div>
              <div class="4">         
               <img src="img/cc.png"></img>

               </div>
              </div>

and I want to replace it with another div with different contents 

          <div class="w">
             <div class="x">
                <h3>name</h3>
            <ul>
                   <li>bday</li>
                     <li>age</li>
            </ul>
               </div>
           </div>

how can i interchange this divs by just clicking a text or hypertext and without refreshing or reloading the page. this is the text to be clicked

                     <div class="1a">
                        <a class="s" href="prof.htm">PROFILE</a>
                  </div>

what could be the code should I use to hide/show the divs (I am knowledgable in HTML,CSS,JQUERY)

please help me.... sorry i am very new and interested in the field

Upvotes: 1

Views: 159

Answers (3)

Bala
Bala

Reputation: 3638

You can make a wrapper div with a class and define id to the link as I did and use Jquery's .toggle() if you want to toggle or use .hide() and .show() if you just want to hide and show once.

Here is the working example - http://jsfiddle.net/X59tp/2/

Here is the code

 $( "#clicker" ).click(function() {
  $( ".toggler" ).toggle( "fast" );
});

Hope it helps.

Upvotes: 0

Pradeep Pansari
Pradeep Pansari

Reputation: 1297

Check below link..

JSFiddle

<script type="javascript">
    $(".s").on("click",function() {
       if ($(".1").is(":visible"))  {
           $(".w").show();
           $(".1").hide();
       } else {
           $(".1").show();
           $(".w").hide();
       }
   });
</script>

Upvotes: 0

Sterling Archer
Sterling Archer

Reputation: 22445

$(".s").on("click",function(event) {
    event.preventDefault();
    if ($(".1").is(":visible"))  {
        $(".w").show();
        $(".1").hide();
    } else {
        $(".1").show();
        $(".w").hide();
    }
});

Using jQuery, just test if the first element you want is visible (I assumed 1 just on order you posted), and hide()/show() respectively

However, when you click that link, you will be redirected!

So, add preventDefault so that it does not perform it's normal duty of changing the page

Upvotes: 1

Related Questions