.slideToggle(); function Hides wrong element when clicked twice

.slideToggle(); function Hides wrong element when clicked twice

for the life of me I have no idea why this is happening. I have a button what when clicked hides a <div> and when clicked again it shows the same <div>

the problem is that when you scroll to the next page and repeat the process the button itself disappears. leaving you with no way to see or get back to the content that is hidden.

Is there something I am doing wrong? or am I approaching this the wrong way?

  1. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script>
    jQuery(document).ready(function($){
        $("button").click(function(){
            $(".more").slideToggle();
        });
    });
    </script>
  1. <button id="btn_text" class="button"> Show / Hide Property Details</button>
            <div id="example" class="more">
                <! -- lots of stuff -->
            </div>