Change attribute with jQuery, based on another div's css

You have written your logic inside document.ready event which is executed only once when page loads. Place your logic inside a function and call it on button click.

The change of an attribute like this is a DOM Mutation event

You can monitor them using this Mutation events plugin

But to be honest @Akshey Bhat has the simplest solution - channel all your logic through one function if you can.

Your logic written inside document.ready event which execute only when page loads. SO you have also write logic for button click.

Here is some logic that you can use.

<input type="search" name="keywords" placeholder="Search..." title="Search" id="QuickSearchQuery" /> 

<script type="text/javascript">
            $(document).ready(function() { 
                if($('#searchBar').css('display') == 'block') {
                    $('#QuickSearchQuery').attr('placeholder','Additional Search Options');
                } else {
                    $('#QuickSearchQuery').attr('placeholder','Search...');
                }

            });


                $('button').click(function() { 
                    if($('#searchBar').css('display') == 'block') {
                    $('#QuickSearchQuery').attr('placeholder','Additional Search Options');
                } else {
                    $('#QuickSearchQuery').attr('placeholder','Search...');
                }
               });
</script>

The cleanest way to do this is to define a custom event that can be triggered whenever you possibly need to update the behavior of your element. This way, you can trigger the event on document load, and whenever other elements change, and consolidate all your logic in the custom event handler.

Here's a sample where I trigger the myToggle event on document ready and when a toggleSearch button is clicked.

$(document).ready(function() { 
  $("#searchBar").trigger("myToggle");
});

$("#toggleSearch").click(function() {
  $("#searchBar").toggle();
  $("#searchBar").trigger("myToggle");
});

$("#searchBar").on("myToggle", function() {
  if($('#searchBar').is(':visible')) {
    $('#QuickSearchQuery').prop('placeholder','Additional Search Options');
  } else {
    $('#QuickSearchQuery').prop('placeholder','Search...');
  }
});

#searchBar {
  background-color: #CCC;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="searchBar">
  Search Bar
</div>
<input type="search" name="keywords" placeholder="Search..." title="Search" id="QuickSearchQuery" /> 
<input type="button" id="toggleSearch" value="Toggle Advanced Search" />

You can use MutationObservers to watch DOM elements for changes. Below is an example of watching attribute changes. This is for pure javascript. I am not sure if jQuery has anything like this built in.

Fiddle: http://jsfiddle.net/AtheistP3ace/e6c1xdob/

HTML:

<div id="some-id" data-test="somevalue"></div>

JS:

var target = document.querySelector('#some-id');

var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        alert(mutation.type);
    });
});

var conf = {
    attributes: true,
    childList: false,
    characterData: false
}

observer.observe(target, conf);

target.setAttribute('data-test', 'newvalue');

Here is an example of watching the searchBar for only style attribute changes. Whenever the style attribute changes lets check if the display changed and update accordingly. This code will work if you are applying display changes inline. If not and are using classes to make these changes you can change this code to watch the class attribute instead to see if a specific class has been applied.

$(document).ready(function() {
    var searchBar = $('#searchBar')[0];
    var observer = new MutationObserver(function(mutations) {
        mutations.forEach(function(mutation) {
            updateAttribute();
        });
    });

    var conf = {
        attributes: true,
        childList: false,
        characterData: false,
        attributeFilter: ['style']
    }

    observer.observe(searchBar, conf);
});

function updateAttribute() {
    if ($('#searchBar').css('display') == 'block') {
        $('#QuickSearchQuery').attr('placeholder', 'Additional Search Options');
    } else {
        $('#QuickSearchQuery').attr('placeholder', 'Search...');
    }
}