CODEWITHSUNDEEP
phpjavascriptjquery
Faryal Khan
Faryal Khan

Reputation: 869

Toggling divs in javascript

I want to toggle divs by clicking on links. but things are not going well for me when I click on a link it shows a new div but don hide the previous one

JavaScript Code

<script type="text/javascript">
    function toggle(id){ 
        var el = document.getElementById(id);
        if(el != null && el.style["display"]== 'none'){ 
            el.style["display"] = "block";
        }
    }
</script>

My divs code

<?php foreach($titles_data as $title){ ?>
 <div style="display:none" id="content_<?php echo $title['idtitles'] ?>">
   <div id="left-ad"></div>
 </div>
<?php } ?>

My links code

<?php foreach($titles_data as $title){ ?>
<li class="flag_<?php echo strtoupper($title['language']) ?>">
 <a id="title_<?php echo $title['idtitles'] ?>" href="" title="<?php echo $title['title'] ?>" onclick="toggle('content_<?php echo $title['idtitles'] ?>')">
 </a>
</li>
<?php } ?>

How can it be done so that when i click on link its respective iv becomes visible and the previous one hides?

Thanks

Upvotes: 0

Views: 588

Answers (4)

MrClan
MrClan

Reputation: 6780

Check my new answer. I just created the sample html page, with 3 divs. Initially all are shown. When you click on one of them, it is hidden. When you click on some other div. The old one is made visible again and the current one is hidden. Modify the logic as per your requirements.

<html>
<head>
<title>asdsa</title>
<script type="text/javascript">
var visibleDiv;
function toggled(id){   
    //$('#div_2').html($('#div_1').html());
    if(document.getElementById(visibleDiv) != null){ document.getElementById(visibleDiv).style["display"] = "block";}
    var el = document.getElementById(id);
    document.getElementById(id).style["display"] = "none";
    visibleDiv = id;
}
</script>
</head>
<body>
    <div id="div_1" onclick="toggled('div_1')">div1</div>
    <div id="div_2" onclick="toggled('div_2')">div2</div>
    <div id="div_3" onclick="toggled('div_3')">div3</div>   
    <hr/>
</body>
</html>

Thanks.

Upvotes: 0

MrClan
MrClan

Reputation: 6780

Assuming that there is always only one div that is displayed, you can check for it: Alter your logic, to declare a global variable to hold the value of the currently visible div. And then update that variable whenever a link is clicked, to hold the id of the currently visible div. So, using your exisitng code, you can do this :

using core javascript: 

var visibleDiv;
function toggle(id){
   // hide the previous div using visibleDiv
   if(document.getElementById(visibleDiv)!= null) document.getElementById(visibleDiv).style["display"] = "none";
   var el = document.getElementById(id);
   if ( el.style["display"] == "" || el.style["display"] == 'none' ){
        el.style["display"] = 'block';
    }
   visibleDiv = id; // update the current visible div name
}

using jquery like this : 

var visibleDiv;
$("[id^=content_]").each(function() {
if($(this).is(':visible')){
   visibleDiv = $(this).attr('id');
}

});

Upvotes: 0

Starx
Starx

Reputation: 78981

To toggle the display, you dont need to do that much

$("#elementid").toggle();

In reference to your question

$('a').click(function() { // however this is select all anchors, better use class
                          // selector like $(".mylinkclass")
   var id= $(this).attr('id'); //get the id
   var ids = id.splite("_"); //split the id on "_", to extract the idtitles
   $("#content_"+ids[0]).toggle(); // use that to toggle
});

Upvotes: 0

Andreas Louv
Andreas Louv

Reputation: 47099

Using native JS:

function toggle(id){
    var el = document.getElementById(id);         
    el.style.display = el.style.display == "none" ? "block" : "none";
}

toggle("myId");

Using jQuery:

function toggle(selector) {
    $(selector).toggle();
}

toggle("#myId");

Upvotes: 1

Related Questions