Hello I have a site I am working on an for this site I

Question

0

Asked: June 14, 20262026-06-14T20:09:17+00:00 2026-06-14T20:09:17+00:00

Hello I have a site I am working on an for this site I

0

Hello I have a site I am working on an for this site I am making three panels flip when they are clicked on, you can think of it as a flip card concept. I have everything working but I realized that since the div itself is wrapped in an anchor tag and has a display of “block”. What I have is the content inside that are links to external pages but since the div is clickable it only reads that anchor. I tried using the z-index but that doesn’t seem to help as all.

This is my markup:

What is ElectedFace?

<div class="flip_content"  id="flip1">
 <div class="content-info">
  <h5 style="text-align:center; font-size:20px; margin:3px 0 0 0; font-family:Arial, Helvetica, sans-serif;"><span class="blue">Elected</span><span class="red">face</span></h5>
  <p>electedface is America's free social network delivering more real time news, faster   than any other website.</p>
  <p>electedface connects subscribers to their elected officials with active electedface accounts</p>

<p>electedface empowers subscribers to share their voice and turn social networking into constructive civil action.</p>
  </div>
</div>

<a href="#" class="flip_switch" data-content_container="#flip2" data-flip_container="#flip_box2">
<div class="flipbox" id="flip_box2">
   <h4>Getting Started</h4>
</div>
</a>

 <div class="flip_content" id="flip2">
 <div class="content-info">
  <p> There are three ways to connect:</p>
     <p><a href="http://google.com">Read top news stories</a> and <a href="http://google.com">Read local news stories</a></p>
     <p><a href="http://google.com">Connect to your elected officials and start a group in your community</a></p>
     <p><a href="http://google.com">Register for free membership</a></p>
     </div>
</div>
<a href="#" class="flip_switch" data-content_container="#flip3" data-flip_container="#flip_box3">
<div class="flipbox" id="flip_box3">
   <h4>Next Steps</h4>
</div>
</a>
 <div class="flip_content" id="flip3">
 <div class="content-info">
  <p>Elected officials: activate your electedface account, connect to your electorate, and enlist supporters.</p>
  </div>
</div>

Heres my Javascript

    <script type="text/javascript">
        $(function(){
           $('.flip_switch').bind("click",function(){
              var element = $(this);
              var content = element.data("content_container");
              var flip_container = element.data("flip_container");
              var active_flipbox = $('.activeFlip');

              if(element.hasClass('activeFlip')){
                  //If the flipbox is already flipped
                  flip_container.revertFlip();  
              }
              else{
                  if(active_flipbox){
                    //Revert active flipbox
                    active_flipbox.revertFlip();
                    //Remove active status
                    active_flipbox.removeClass('activeFlip');
                  }
                  $(flip_container).flip({
                    direction: 'rl',
                    color: '#c8cbce',
                    content: $(content).html(),
                    speed:100,
                    onBefore: function(){
                      $(flip_container).addClass('activeFlip'); 
                    }  
                  });
              }

               return false;  
           });      
        });
    </script>