CODEWITHSUNDEEP
jqueryshow-hide
Aidar
Aidar

Reputation: 23

show/hide iframe with Jquery

I have created the iframe. I want to be able to show/hide the frame on press of a button. I have found this code, but the source didn't fully explain how to put together the HTML, jquery and css. I want it to show/hide on click of the "button1". If anyone could help me to find the reason I would appreciate. 

<!DOCTYPE html>
<html lang="en">

<head>
  <title>Subsea Data Analysis Package</title>
  <meta charset="utf-8">
  <meta name="description" content="Subsea Data Analysis Package">
  <meta name="author" content="Viper Subsea Technology Limited">
  <link rel="stylesheet" href="css/styles.css">
    <script type="text/javascript"       src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>


    <script type="text/javascript">
    function hideToggle(button, elem) {
      $(button).toggle(

        function () {
          $(elem).hide();
        },

        function () {
          $(elem).show();
        }
  );
  }
    </script>
  <script type="text/javascript">
  hideToggle(".button1", ".iframe1");

    </script>

  </head>

  <body>

<div class="content">
        <div class="wrapper">
            <div class="container">
      <button class="button1">toggle</button>
      <iframe class="iframe1" src="includes/tree.html"></iframe>

            </div><!--container-->
        </div><!--wrapper-->
    </div><!--content-->

Upvotes: 0

Views: 3894

Answers (1)

Adam Mazzarella
Adam Mazzarella

Reputation: 763

I don't know why it is being over-complicated. The button binding can be simplified to:

$(function() {
    $('.button1').on('click', function() {
        $('.iframe1').toggle();
    });
});

To explain, the first function $(function() {...} is shorthand for executing a chunk of code on DOM ready. This way the page content can be loaded and the script will not be running before items are loaded.

The second piece is binding the click event to the button .button1. The portion function() {...} will be executed onclick.

The third piece toggles the visibility of .iframe1. If it is currently visible it will turn it invisible. The inverse will occur if it is invisible.

Upvotes: 1

Related Questions