Show Hide Div If, If Statement Is True

Show Hide div if, if statement is true

You can use css or js for hiding a div. In else statement you can write it as:

else{
?>
<style type="text/css">#divId{
display:none;
}</style>
<?php
}

Or in jQuery

else{
?>
<script type="text/javascript">$('#divId').hide()</script>
<?php
}

Or in javascript

else{
?>
<script type="text/javascript">document.getElementById('divId').style.display = 'none';</script>
<?php
}

Show Hide div on load page if, if statement is true

In your index.html make following changes. You have to give some value to your radio buttons to fetch in other file

<label for="chkYes2">
    <input type="radio" id="chkYes2" name="animalkidani" value="Y" />
    Include
</label>
<label for="chkNo2">
    <input type="radio" id="chkNo2" name="animalkidani"  value="N" checked />
    Exclude
</label>

In your welcome.php make following changes. We will use radio button value to hide and display div content.

<div id="dvanimalvillas" <?php echo ($_POST['animalkidani'] == "Y") ? 'style="display:none;"' : '' ; } ?>>
    The quote for Animal Kingdom Villas will show here when yes is selected
</div>      

<div id="dvanimalkidani" <?php echo ($_POST['animalkidani'] == "N") ? 'style="display:none;"' : '' ; } ?>>
    The quote for Animal Kingdom Kidani will show here when yes is selected
</div>

show hidden div section based on if statement

you cannot call javascript function from PHP, PHP is server side based and stands for Preprocesing Hypertext while Javascript is browser based.

You could use:

<?php 
    if ($_GET['id'] == 'scheduler') {
       $showdiv = 'scheduler';
    }
    else if ($_GET['id'] == 'test') {
       $showdiv = 'test';
    }
    else if ($_GET['id'] == 'super') {
       $showdiv = 'super';
    }
    echo "<script type=\"text/javascript\">document.getElementById('".$showdiv."').style.display = 'block';</script>";
?>

but that should be at bottom of the page, after those divs are loaded.

How to show and hide div based on php condition

Instead of putting the JavaScript code inside your PHP, just put the divs in there.

<?php
session_start();
?>

<li>

<?php
if(isset($_SESSION["loggedin"]) && $_SESSION["loggedin"] === true) {
?>

    <div style="float:right;display:block;" id="loggedin">
        <a href="login_signup/login.php" class="myButton">   Loggedin   </a>
    </div>

<?php
} else {
?>

    <div style="float:right;display:block;" id="public">
        <a href="login_signup/login.php" class="myButton">   Login   </a>
    </div>

<?php
}    
?>

</li>

How to hide an element in if statement?

I'd recommend changing a class on the body element so that you can use CSS for the styling.

HTML: nothing really changed here

<body>
    <div class="container">
        <div class="title-wrapper">
            <a href="~/@countryText.ToLower()" title="@countryFullText" alt="@countryText"><span id="article-banner-country">@countryFullText</span></a> /
            <a href="@parentUrl" title="@subCatText" alt="@subCatText"><span id="article-banner-category">@subCatText</span></a>
            <div id="article-banner-title">@pageTitle</div>
                <div class="feedback-container content-desktop" id="alert-dialog">
                    <div class="feedback-left">
                        <p>Have any feedback? Reach out to us!</p>
                    </div>
                    <div class="feedback-right">
                        <button class="feedback-button">Give Feedback</button>
                        <button class="feedback-button">Dismiss</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>

javascript: just check the document.title and add the class the the body element

<script>
    if(document.title === "Test Article Two") {
        document.body.classList.add("show-alert");
    }
</script>

Use CSS for the styling. Always hide #alert-dialog and only show it when we add the class to the body.

<style>
    #alert-dialog {
        display: none;
    }
    .show-alert #alert-dialog {
        display: block;
    }
</style>

Show and Hide element if statement JQuery

Can't give you an exact answer without seeing your HTML, but this should get you started:

$(function() {  $('.widget').each(function() {    var widgetTitle = $('h2',this).text();    if (widgetTitle === 'Widget One') {      $(this).hide();    }  });});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="widget">  <h2>Widget One</h2>  <p>This widget <strong>will not</strong> be shown</p></div>
<div class="widget">  <h2>Widget Two</h2>  <p>This widget <strong>will</strong> be shown</p></div>

jQuery if statement show/hide

do you mean like:

if( $("#myModal").length ) { //check if div with id "myModal" exists
  $("#purchaseNotice").addClass("some_class").show();
}
else {
   $("#purchaseNotice").hide();
}

Javascript if else statement to hide and show div

You should give the "respond" divs a common class:

<div id="respond-1" class="response' style="display:none;"></div>

Then you can get all divs by using getElementsByTagName, compare the class and hide them on a match:

function hideAllResponses() {
    var divs = document.getElementsByTagName('div');
    for(var i = divs.length; i-- ;) {
        var div = divs[i];
        if(div.className === 'response') {
            div.style.display = 'none';
        }
    }
}

We cannot use getElementsByClassName, because this method is not supported by IE8 and below. But of course this method can be extended to make use of it if it is supported (same for querySelectorAll). This is left as an exercise for the reader.

Further notes:

Adding javascript: to the click handler is syntactically not wrong but totally unnecessary. Just do:
```
onclick="showresponddiv(this.id)"
```
If you have to do a lot of DOM manipulation of this kind, you should have a look at a library such as jQuery which greatly simplify such tasks.

Update: If always only one response is shown and you are worried about speed, then store a reference to opened one:

var current = null;

function showresponddiv(messagedivid){
    var id = messagedivid.replace("message-", "respond-"),
        div = document.getElementById(id);

    // hide previous one
    if(current && current !== div) {
        current.style.display =  'none';
    }   

    if (div.style.display=="none"){
        div.style.display="inline";
        current = div;
    } 
    else {
        div.style.display="none";
    }
}

Edit: Fixed logic. See a DEMO.

Show Hide Div If, If Statement Is True